Badges

Badges help inform customers on the state of a study. They also communicate and indicate number-driven information.

Badges are white-space sensitive, so be sure to remove trailing spaces. Otherwise the badge can look lopsided.

Variants

content light content dark content 100 new notification 
<tk-badge>content</tk-badge>
<tk-badge type="light">light content</tk-badge>
<tk-badge type="dark">dark content</tk-badge>
<tk-badge type="muted">100</tk-badge>
<tk-badge type="success">new</tk-badge>
<tk-badge type="error">notification</tk-badge>

Description

Our primary badge provides focus and is used to convey top-level information like study count and limitations. Our muted badge is subtle and is used to convey supplementary information and attributes.

Numbered

Unaffected badge
Unaffected badge : content 
<div class="badge-counter mb-3x">
  <tk-badge numbered></tk-badge>
  <tk-badge>Unaffected badge</tk-badge>
  <tk-badge numbered></tk-badge>
</div>
<div class="badge-counter">
  <tk-badge numbered></tk-badge>
  <tk-badge numbered></tk-badge>
  <tk-badge type="muted">Unaffected badge</tk-badge>
  <tk-badge numbered>: content</tk-badge>
</div>

Description

Use the numbered attribute to increment badges. Note: it must be wrapped inside the card-counter or badge-counter class to work. The only realistic use case for this is inside cards.

Size

Patronus Patronus Patronus Patronus Patronus 
<tk-badge size="xxs">Patronus</tk-badge>
<tk-badge>Patronus</tk-badge>
<tk-badge size="small">Patronus</tk-badge>
<tk-badge size="medium">Patronus</tk-badge>
<tk-badge size="large">Patronus</tk-badge>

Description

Rarely should you need a badge size other than the default (xs).

Do

  • Place badges after content
  • Apply tooltips for more context

Don't

  • Add a lot of content to the badge, try to keep content below 24 characters
  • Include two badges next to each other unless absolutely necessary

Accessibility

  • Needs to have a minimum contrast ratio of 4.5