Tags with static text can be used as part of a multiple Select like a removable tag or as a reference to an object or attribute.
Dark and light colors tags 
<div class="tag tag-dark-blue">Dark Blue</div>
<div class="tag tag-dark-yellow">Dark Yellow</div>
<div class="tag tag-dark-green">Dark Green</div>
<div class="tag tag-dark-red">Dark Red</div>
<div class="tag tag-dark-teal">Dark Teal</div>
<div class="tag tag-dark-violet">Dark Violet</div>
<div class="tag tag-dark-neutral">Dark Neutral</div>
<div class="tag tag-light-blue">Light Blue</div>
<div class="tag tag-light-yellow">Light Yellow</div>
<div class="tag tag-light-green">Light Green</div>
<div class="tag tag-light-red">Light Red</div>
<div class="tag tag-light-teal">Light Teal</div>
<div class="tag tag-light-violet">Light Violet</div>
<div class="tag tag-light-neutral">Light Neutral</div>
Removable tag 
<div class="tag tag-light-blue removable-tag">
    Light blue
    <div class="icon-container"></div>
</div>
Tag with icon 
<div class="tag tag-light-blue icon-tag">
    <div class="icon-container material-symbols-outlined">check</div>
    Tag icon
</div>
General guidelines
  • They can be used for various types of objects, including: free form text, predefined text, rules, or contacts.

  • They can be rendered flat, as links, or with a close button.

  • Tags can be permanent or removable (by displaying the remove icon).
DO
  • To draw attention to the details or state of the element, thus facilitating exploration.
  • To present information, such as status.
DON'T
  • If the entire message has an action associated with it, use an alert.
  • If you have more information to display, use another component. To keep the user interface uncluttered, you can choose tooltip or banners.