Skip to content
@erikakers/slate

Tag and pill

A tag is a label on a thing: a category, a technology, usually a link to more of the same. A pill is a state of a thing: live, in progress, archived. Neither has a native element: a tag is an <a> when it links and a <span> when it does not; <mark> means a run highlighted for reference, which is a different thing.

Tag

.slate-tag. The boundary is --slate-color-line-control: the whole point of this component's border, held to 3:1, because a tag has no fill and no underline of its own.

typographyaccessibilitynot a linkaccent

Pill

.slate-pill. Semantic colour and no border: a pill is a status read beside a title, never a control. Shape encodes the state as well as colour: an archived pill's marker is square where the other two are round, so the state survives greyscale, colour vision deficiency and a forced-colours palette.

LiveIn progressArchived

Keyboard interaction

  • A tag that links (<a class="slate-tag">) is reached by Tab and followed by Enter, exactly like any other link.
  • A tag that is a <span> and every pill are not operable and carry no tab stop: they are labels, not controls, and neither should be reachable by keyboard.