Tag

The tag component, prefixed by gds-tag, is used to indicate selected items or options.

To include a close button inside the gds-tag, use a gds-tag__button. For a smaller tag, use the --sm modifiers.

Prototypes Page

<div class="gds-tag">This is a tag</div>
<div class="gds-tag gds-tag--with-button">Gillette<button class="gds-tag__button"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--primary">Primary Tag<button class="gds-tag__button gds-tag__button--primary"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--success">Success Tag<button class="gds-tag__button gds-tag__button--success"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--warning">Warning Tag<button class="gds-tag__button gds-tag__button--warning"></button></div>
<div class="gds-tag gds-tag--with-button gds-tag--danger">Danger Tag<button class="gds-tag__button gds-tag__button--danger"></button></div>
<div class="gds-tag gds-tag--with-button-sm gds-tag--sm">
    Small Tag<button class="gds-tag__button gds-tag__button--sm"></button>
</div>
<div class="gds-tag gds-tag--primary gds-tag--with-button-sm gds-tag--sm">
    Small Primary Tag<button class="gds-tag__button gds-tag__button--primary gds-tag__button--sm"></button>
</div>

Optional classes:

• gds-tag--sm
• gds-tag--primary
• gds-tag--success
• gds-tag--warning
• gds-tag--danger
• gds-tag--blue
• gds-tag--gold
• gds-tag--green
• gds-tag--orange
• gds-tag--purple
• gds-tag--red
• gds-tag--darkblue
• gds-tag--darkgreen
• gds-tag--darkred
• gds-tag--dark
• gds-tag--primary-dark
• gds-tag--secondary-dark
• gds-tag--success-dark
• gds-tag--warning-dark
• gds-tag--danger-dark
• gds-tag--blue-dark
• gds-tag--gold-dark
• gds-tag--green-dark
• gds-tag--orange-dark
• gds-tag--purple-dark
• gds-tag--red-dark
• gds-tag--darkblue-dark
• gds-tag--darkgold-dark
• gds-tag--darkgreen-dark
• gds-tag--darkred-dark
• gds-tag__button--blue
• gds-tag__button--blue-dark
• gds-tag__button--gold-dark
• gds-tag__button--green-dark
• gds-tag__button--orange-dark
• gds-tag__button--purple-dark
• gds-tag__button--red-dark
• gds-tag__button--darkblue-dark
• gds-tag__button--darkgold-dark
• gds-tag__button--darkgreen-dark
• gds-tag__button--darkred-dark
• gds-tag__option--primary
• gds-tag__option--primary-dark
• gds-tag__option--secondary
• gds-tag__option--secondary-dark
• gds-tag__option--success
• gds-tag__option--success-dark
• gds-tag__option--warning
• gds-tag__option--warning-dark
• gds-tag__option--danger
• gds-tag__option--danger-dark
• gds-tag__option--blue
• gds-tag__option--blue-dark
• gds-tag__option--gold
• gds-tag__option--gold-dark
• gds-tag__option--green
• gds-tag__option--green-dark
• gds-tag__option--orange
• gds-tag__option--orange-dark
• gds-tag__option--purple
• gds-tag__option--purple-dark
• gds-tag__option--red
• gds-tag__option--red-dark
• gds-tag__option--darkblue
• gds-tag__option--darkblue-dark
• gds-tag__option--darkgold
• gds-tag__option--darkgold-dark
• gds-tag__option--darkgreen
• gds-tag__option--darkgreen-dark
• gds-tag__option--darkred
• gds-tag__option--darkred-dark