Tag
Tag displays metadata categorizing or grouping content in an application. They are read-only and do not interfere with page interactions but use categorical colors to draw attention. Tags appear as stylized elements with text, optionally accompanied by an icon to reinforce their meaning.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.30.0 |
Note: This tab list includes overflow; tab positions may be inaccurate or change when a tab is selected
- For displaying categories in a catalogue or within a group.
- To display non-interactive data on a page.
- For quick filtering and selection, use
Pill. Tags and Pills both categorize content in an app, but while Tags are read-only and simply display metadata, Pills are interactive and allow users to filter or sort content. - To display counts, notifications or if you need a small, compact piece of information to be displayed inline, for example ‘New’. Instead, use
Badge.
- Position each tag close to the element it refers to, creating a clear visual connection for all users.
- Though typically placed after or below associated elements, tags may alternatively be placed elsewhere after carefully considering your specific layout requirements.
- Keep tag content brief and meaningful, limiting to one or two words.
- Use sentence case for tag labels.
To import Tag from the core Salt package, use: