Tag

The Tag component is used to convey small pieces of information e.g. display of status, to show one more selected items (see optional icon). It is nearly always used to visualize multiple item selections inside UI components.

Implementation Notes

Use the <button> tag for interactive elements and <a href="#"> for navigation. For simple text, use the <span> tag.

Default Tag

.c-tag

default tag
-small tag
uppercase text

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <span class="c-tag">default tag</span><br/>
    <span class="c-tag -small">-small tag</span><br/>
    <span class="c-tag h-type-uppercase">uppercase text</span><br/>
</div>

Tag Sizes

.c-tag[.-small, .-large]

Default Tag
Small Tag
Large Tag Example

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <span class="c-tag">Default Tag</span><br/>
    <span class="c-tag -small">Small Tag</span><br/>
    <span class="c-tag -large">Large Tag Example</span><br/>
</div>

Disabled Tag

.c-tag[disabled, .-disabled]

Show Code

<button disabled class="c-tag" type="button">
  Disabled Tag
</button>

Tag Colors

.c-tag[.-primary, .-success, .-success-dark, .-warning, .-warning-dark .-error, .-error-dark, .-neutral, .-white]

default
-primary
-success
-success-dark
-warning
-warning-dark
-error
-error-dark
-neutral
-white

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <span class="c-tag">default</span><br/>
    <span class="c-tag -primary">-primary</span><br/>
    <span class="c-tag -success">-success</span><br/>
    <span class="c-tag -success-dark">-success-dark</span><br/>
    <span class="c-tag -warning">-warning</span><br/>
    <span class="c-tag -warning-dark">-warning-dark</span><br/>
    <span class="c-tag -error">-error</span><br/>
    <span class="c-tag -error-dark">-error-dark</span><br/>
    <span class="c-tag -neutral">-neutral</span><br/>
    <span class="c-tag -white">-white</span>
</div>

Interactive Tags with Icons

If the tag is a button or link, it has a mouseover effect:

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8">
    <button type="button" class="c-tag">
        default
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -primary">
        primary
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -success">
        success
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -success-dark">
        success-dark
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -warning">
        warning
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -warning-dark">
        warning-dark
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -error">
        error
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -error-dark">
        error-dark
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -neutral">
        neutral
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
    <button type="button" class="c-tag -white">
        white
        <span class="c-tag__icon fas fa-chevron-down" aria-hidden="true"></span>
    </button>
</div>

Selectable Tag

A selectable tag can be used like a Checkbox, but with a different look. It has two states: selected and not selected.

• Add aria-pressed="true" to the tag to indicate that it is selected.
• Add aria-pressed="false" to the tag to indicate that it is not selected.

Show Code

<div class="h-flex h-flex-row h-vertical-center h-wrap gap-8" role="group" aria-label="Tag Selection">
  <button
    class="c-tag -large -neutral"
    type="button"
    aria-pressed="false">
    Unselected Tag
  </button>
  <button
    class="c-tag -large -success-dark"
    type="button"
    aria-pressed="true">
    <span class="fas fa-check" aria-hidden="true"></span>
    Selected Tag
    <span
      class="c-tag__remove"
      tabindex="0"
      role="button"
      aria-label="Remove Selected Tag">
      <span class="fas fa-times" aria-hidden="true"></span>
    </span>
  </button>
</div>