Tags
Tags display a single category, dimension, or property related to adjacent content.
Theme tags
<span class="ds-tag ds-tag-primary">Primary</span>
<span class="ds-tag ds-tag-secondary">Secondary</span>
<span class="ds-tag ds-tag-danger">Danger</span>
<span class="ds-tag ds-tag-success">Success</span>
<span class="ds-tag ds-tag-warning">Warning</span>
<span class="ds-tag ds-tag-information">Information</span>
<span class="ds-tag ds-tag-grey">Grey</span>
Tags outline
<span class="ds-tag ds-tag-outline ds-tag-primary">Primary</span>
<span class="ds-tag ds-tag-outline ds-tag-secondary">Secondary</span>
<span class="ds-tag ds-tag-outline ds-tag-danger">Danger</span>
<span class="ds-tag ds-tag-outline ds-tag-success">Success</span>
<span class="ds-tag ds-tag-outline ds-tag-warning">Warning</span>
<span class="ds-tag ds-tag-outline ds-tag-information">Information</span>
<span class="ds-tag ds-tag-outline ds-tag-grey">Grey</span>
Tags with close
Tags may have a close button so that users can remove them if required.
<span class="ds-tag ds-tag-close ds-tag-primary">Primary <a class="icon-close-lite "></a></span>
<span class="ds-tag ds-tag-close ds-tag-secondary">Secondary <a class="icon-close-lite "></a></span>/span>
<span class="ds-tag ds-tag-close ds-tag-danger">Danger <a class="icon-close-lite "></a></span>
<span class="ds-tag ds-tag-close ds-tag-success">Success <a class="icon-close-lite "></a></span>
<span class="ds-tag ds-tag-close ds-tag-warning">Warning <a class="icon-close-lite "></a></span>
<span class="ds-tag ds-tag-close ds-tag-information">Information <a class="icon-close-lite "></a></span>
<span class="ds-tag ds-tag-close ds-tag-grey">Grey <a class="icon-close-lite "></a></span>
Guidelines
- Write keywords in sentence case.
- Do not overload an interface with tags.