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.


content light content dark content 100 new notification
<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>


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.


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 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>


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.

With Icon

Icon and text
<tk-badge icon>
  <tk-icon class="mr-1x" name="info" size="small"></tk-icon>
  Icon and text


Use the icon attribute to use icons in the badge


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


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


Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them. Bee in your bonnet hand
<div class="demo-badge-group">
  <tk-badge size="medium" icon>
    <tk-icon class="mr-1x" name="light-bulb" size="small"></tk-icon>
    Boggarts lavender robes, Hermione Granger Fantastic Beasts and Where to Find Them.
  <tk-badge type="dark" size="medium">
    Bee in your bonnet hand


📱 For badges with longer strings, the badges will break and wrap inline



  • Place badges after content
  • Apply tooltips for more context


  • 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


  • Needs to have a minimum contrast ratio of 4.5