Skip to content
Jewel

Tag

Tags label things with a category, and pressable tags filter by one. They’re small outlined pills; a solid fill marks the one that’s on.

CSS
css/components/tag.css

01 — Variants

Label

A plain category label. .tag--solid adds emphasis.

IdentityEditorialMotionFeatured

Linked

A link to a tag’s page. No underline; the pill is the affordance. aria-current="page" fills the tag for the page you’re on.

EditorialTypeCurrent page

Pressable

A button that turns on and off, as in a filter. Pressed fills like the solid tag.

Touch size

Tags you can press or follow grow to a 32px pill on touch screens, with an invisible 44px tap area. .tag--touch forces that size everywhere. Wrapped rows need a 12px row gap so tap areas don’t overlap.

Touch size

02 — States

Disabled

Disabled tags dim and their edge turns dashed.

03 — Usage

Use it for

  • Categories on a project or photo.
  • Filters, in a Filter row.
  • Short words: one or two, never a sentence.

Avoid

  • Status, such as Private or Failed. Use a badge.
  • Actions. Use a button.
  • Color-coding categories. Tags have one look.

04 — Accessibility

Notes

  • Pressable tags use aria-pressed. Group them with role="group" and an aria-label.
  • Touch-size tags keep a 44px tap area without looking bigger.