Tag is a component for thematic grouping of information in the interface (in tables, filters, cards, etc.).
Tag is usually set by the system or by the user.
Component consists of:
- icon or any other addon before the text (optional);
Sizes and paddings
|Size (height in px)||Paddings|
There are several themes of tags.
|Tag theme||Appearance example||Description|
||The main type of tag for using on a light background. Any color from our color palette can be set as a tag color, the default color is
||The secondary tag type for using on a light background when it is necessary to make the contrast between the primary and secondary tags.|
||It is an inversion of the primary tag for using on dark or colored background.|
||It is an inversion of the secondary tag for using on dark or colored background.|
||The additional type for special tag that adds other tag.|
||It is an inversion of the additional type for special tag that adds other tag.|
User can create a tag using a tag with the
This tag opens InlineInput. You can add a mask label to keep the user in the context of what he needs to type into the input.
By clicking on the Check icon or
Enter, the value in the input is saved and wraps into a tag.
If the space for tag placement is limited, then reduce the text into the
ellipsis. When hovering over a tag with the
ellipsis, show the tooltip with the full tag label.
For editable tags use InlineInput component as for the adding tag case. See live example.
You can set the maximum width for the tag.
If the text of a tag exceeds the maximum width, collapse it into
ellipsis and show a tooltip with a full tag label while hovering over such a tag.
Margins between tags
|Size (height in px)||Margins|
Usage in UX/UI
Use tags for visual marking of objects, fast recognition and navigation.