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.
<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