Avala Design
← Components/primitives

Tag

Carbon-spec Tag. Used for categorical metadata (labels, filters, statuses). Four variants × ten color tones × three sizes.

primitivesstablea11y: untested2/3 coverageEdit on GitHub ↗

Live playground

Edit the JSX below — preview updates instantly. Switch brand × tone in the toolbar to see the same component re-themed in place.

LiveOpen all variants in Storybook ↗
Edit JSX — preview updates livereact-live
import { Tag } from "@avala/design";

<Tag variant="default" size="md" shape="square" tone="gray">Tag</Tag>

All variants

The Storybook stories file rendered as an iframe — every variant, every size, every state, baselined for visual regression.

primitives-tag--defaultOpen in Storybook →

When to use

  • Categorical metadata on lists / cards / rows ("Computer vision", "Active", "v2").
  • Filter chips a user can toggle (selectable) or dismiss (dismissible).
  • Status indicators where the label needs colour and text together.

When not to use

  • Counts or unread markers → use `Badge`. Tags carry textual meaning; Badges signal magnitude.
  • Single-toggle UI → use `Toggle` or `Switch`. selectable Tag is for many-of-many filters, not a binary state.
  • Inline destructive actions on a Tag → use `IconButton` next to it.