Badges

Types

Badges highlight an action or metaphor inline with text. The different states are similar to the ones defined in our tag component.

Content

A badge can have a label and an icon. The icon can be positioned on the left or right.

Spacing between icon, label and borders is 6dp

Examples

These badges follow the available text-sizes within Teamleader.

There is no version for our H1 since badges er not allowed there.

Color

Available in Teamleader’s text-colors.

Default

Text Tint darkest
Icon 86% Tint darkest
Background 48% Tint-light
Border 48% Tint-light

Hover

Border 100% Tint-light

Active

Icon 100% Tint darkest
Background inset shadow 100% Tint light

Focus

Border 2px 100% Tint-light

Disabled

48% Default state