Tags

Tags are used to indicate association, groups, or status.

Tags

Static tags used to categorize or group information. These tags are available in 5 default styles, but color variations can be created using text and background modifiers.

Default info success error warning
 View Code
<span class="ds-tag">
  <span class="ds-tag__text">Default</span>
</span>
<span class="ds-tag ds-tag--info">
  <span class="ds-tag__text" aria-disabled="false" role="button">info</span>
</span>
<span class="ds-tag ds-tag--success">
  <span class="ds-tag__text" aria-disabled="false" role="button">success</span>
</span>
<span class="ds-tag ds-tag--error">
  <span class="ds-tag__text" aria-disabled="false" role="button">error</span>
</span>
<span class="ds-tag ds-tag--warning">
  <span class="ds-tag__text" aria-disabled="false" role="button">warning</span>
</span>

Removable Tags

Tags can be used in cases where a removeable group may be desired. Example: filters, categories, etc...

Default
 View Code
<span class="ds-tag">
  <span class="ds-tag__text">Default</span>
  <button class="ds-tag__remove">
    <span class="ds-sr-only">Close</span>
  </button>
</span>