Tags

Types

Tags enable the user to create keywords that can be used for filtering certain types of customers, companies or other Teamleader content. Available in both Light & dark.

Label Only

In some cases, tags are used for navigation only. There, we don’t provide the close icon and only show the actionable label.

Sizes

Our Tag component has three key sizes: small, medium and large.

Tags need to fit into the input field component. Therefore, the height of each tag size is adjusted to do so.

  • Small & Medium = Input field height - 3px
  • Large = Input field height - 6px

Margin between tags

Color

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