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.
In some cases, tags are used for navigation only. There, we don’t provide the close icon and only show the actionable label.
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
Text Tint darkest
Icon 86% Tint darkest
Background 48% Tint-light
Border 48% Tint-light
Border 100% Tint-light
Icon 100% Tint darkest
Background inset shadow 100% Tint light
Border 2px 100% Tint-light
48% Default state