Badges help inform customers on the state of a study. They also communicate and indicate number-driven information.
<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>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.
<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>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.
<tk-badge icon>
<tk-icon class="mr-1x" name="info" size="small"></tk-icon>
Icon and text
</tk-badge>Use the icon attribute to use icons in the badge
<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>Rarely should you need a badge size other than the default (xs).
<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>
<tk-badge type="dark" size="medium">
Bee in your bonnet hand
</tk-badge>
</div>📱 For badges with longer strings, the badges will break and wrap inline