mostlycss
Theme

Tag

span.tag

Tag — a chip standing for a value the user put there and can take away: a filter that has been applied, a recipient in a compose field, a label on a ticket.

Examples

Removable filters

View “Removable filters” as
  • Design
  • Research 
<ul class="tag-list">
  <li>
    <span class="tag">
      <span class="tag-label">Design</span>
      <button class="tag-remove" type="button">
        <svg class="icon" aria-hidden="true"><use href="#icon-x"></use></svg>
        <span class="sr-only">Remove Design</span>
      </button>
    </span>
  </li>
  <li>
    <span class="tag">
      <span class="tag-label">Research</span>
      <button class="tag-remove" type="button">
        <svg class="icon" aria-hidden="true"><use href="#icon-x"></use></svg>
        <span class="sr-only">Remove Research</span>
      </button>
    </span>
  </li>
</ul>

The remove control is a real <button> with a real name — "Remove Design", not "×".

A badge is output the user cannot act on; a tag is input they can, and that difference is a focusable control and a keyboard path, not a coat of paint.

Without the control

View “Without the control” as
Design
<span class="tag"><span class="tag-label">Design</span></span>

A tag that cannot be removed needs no button.

Tokens 18

Level 2, declared on .tag itself. Set any of them on that selector to restyle this component without touching the skin.

Level 2 tokens declared by tag
TokenDefault
--tag-list-gapvar(--space-2)
--tag-remove-bgtransparent
--tag-remove-colorvar(--color-on-surface-muted)
--tag-remove-size1.25rem
--tag-remove-hover-bgvar(--color-surface-sunken)
--tag-remove-hover-colorvar(--color-on-surface)
--tag-bgvar(--color-surface-sunken)
--tag-border-colorvar(--color-border)
--tag-border-widthvar(--border-width)
--tag-colorvar(--color-on-surface)
--tag-font-familyvar(--font-secondary)
--tag-font-sizevar(--font-size-xs)
--tag-font-weightvar(--font-weight-medium)
--tag-gapvar(--space-1)
--tag-min-size1.75rem
--tag-padding-blockvar(--space-1)
--tag-padding-inlinevar(--space-2)
--tag-radiusvar(--radius-field)

Variants and states

Variants

  • .tag-lg
  • .tag-round
  • .tag-sm

Inside it

  • .tag-remove
  • .tag-list
  • .tag-label

State it reads

Read from the platform, never mirrored into a class that could disagree with it.

  • :disabled
  • :focus
  • :hover

Before you ship it

What you have to do 1 requirements

  1. Name every remove button after its tag. "Remove Design". This is the one thing in the component nothing can supply and nothing can detect the absence of, and it is why the icon is aria-hidden and the name is a .sr-only child rather than an aria-label — you can see it in the markup and notice when it is missing. Move focus before removing the node. See above. Use a list when there is more than one tag. <ul class="tag-list"> makes a screen reader announce "list, 5 items", which is how someone knows how many filters are on without reading all of them.

src/css/components/tag.css · npx mostlycss add tag