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>
<tk-badge type="info">info</tk-badge>
<tk-badge type="warning">warning</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="mb-3x">
<tk-badge>1</tk-badge>
<tk-badge>Unaffected badge</tk-badge>
<tk-badge>2</tk-badge>
</div>
<div>
<tk-badge>1</tk-badge>
<tk-badge>2</tk-badge>
<tk-badge type="muted">Unaffected badge</tk-badge>
<tk-badge>3: content</tk-badge>
</div>
Note: The numerated tk-badges
must each contain their index that follows the placement of the badges. The only realistic use case for this is inside cards.
<tk-badge>
<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="medium">Patronus</tk-badge>
<tk-badge size="large">Patronus</tk-badge>
Rarely should you need a badge size other than the default (small
).
<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
Needs to have a minimum contrast ratio of 4.5