Skip to content

Tag

Label – Category

Tags are compact labels used to categorize or highlight content, helping users quickly identify status, type, or context. A Tag is static and carries no interaction of its own.

  • CSS

Maintained by Platform

Ready to use

DesignCSSAccessibility

Tags label, categorise, or highlight content in a compact form. They help users identify the status, context, or type of information quickly and consistently. A Tag can include an optional icon.

A Tag is static — it carries no interaction of its own. It has no selected, hover or disabled state, and never responds to a click.

Anatomy

Section titled “Anatomy”
In stock
  1. Tag
  2. Star
  3. Tag text

When to use it

Section titled “When to use it”

Use a Tag when:

  • You need to indicate the status or category of an element (Success, Danger, Info, Warning).
  • You’re displaying read-only metadata — a search result’s attributes, the filters already applied to a list.
  • You need a compact, non-interactive label that adapts to whatever surface it sits on.

Avoid Tags when:

  • The user is meant to toggle it on or off to filter something — a Tag has none of the states that interaction needs.
  • The action is a primary CTA — use buttons.
  • The layout is dense and tags would add visual noise without hierarchy.
  • A plain Label or Badge would suffice.

Properties

Section titled “Properties”

Colour

Seven colours, matching Figma one-for-one. Default is the unmodified tag; Primary and Secondary carry brand colour; Success, Danger, Info and Warning carry status meaning. Each sets the fill, the border and the label colour together.

Surface

There is no light/dark property to pick. Each colour is defined twice — once for light surfaces, once for dark — and the tag chooses between them from the surrounding scheme. Spec the colour; the surface takes care of itself.

This replaces the old Contrast toggle. A designer no longer chooses between a tinted and a solid treatment: on a light surface a status tag is solid, on a dark one it is tinted, and that pairing is fixed.

Icon

Optional leading icon (Has Icon in Figma, defaulting to the Star glyph), useful for reinforcing the meaning — a check for Success, a warning for Danger. Decorative icons should stay hidden from assistive tech.

Brand

Typography and corner radius are brand-owned, so the same tag is a different shape and weight per brand. Toyota and Lexus render a full pill; KINTO uses a small radius. Lexus sets its own typeface, size and letter-spacing, which makes Lexus tags noticeably larger than Toyota’s. Don’t pin a tag’s width or height in a spec — let it hug its label.

Platform considerations

Section titled “Platform considerations”

Desktop

Tags sit comfortably inline next to titles or metadata. Keep their padding consistent across surfaces so the rhythm of a page holds.

Tablet

Same inline placement. Watch tag density inside cards — too many tags in one row crowd the layout quickly.

Mobile

Stack tags onto multiple rows rather than truncating the labels. Keep the leading icon (if any) at its natural size so the meaning still reads.

Best practices

Section titled “Best practices”

Tags work on light and dark surfaces alike. Every colour carries a value for each, and the tag reads the surrounding scheme to pick — so a tag dropped into a dark hero or a .is-contrast region needs no adjustment.

Do

Use tags to clarify type or status, keep labels short and clear, and let the tag size itself around its text. Pair a status colour with a word or an icon that carries the same meaning, so the message survives for anyone who can’t distinguish the hue.

Don't

Don’t use tags as buttons (reach for the actual Button component) or as filter controls, don’t lean on colour alone to carry status, and don’t pack too many tags into a small space — visual noise hides the meaning.

Content guidelines

Section titled “Content guidelines”

Tag text should be short, ideally one or two words, and name the status or category in plain language (“In stock”, “Available”, “Sold out”). Use sentence case (“In stock”, not “IN STOCK”) and skip trailing punctuation.