Tag

presentational

Compact labelled token for metadata, status, and active filters. Tags can be static labels or removable chips with a native button affordance.

Preview

Scale1.00

Variants

StableBetaTrialBlocked

Sizes

SmallMediumDisabled

Removable chip

region: west

Usage

import { Tag } from 'PRIVATE_BETA_PACKAGE_COORDINATE_REDACTED';

<Tag label="Beta" variant="accent" />

<Tag label="Blocked" variant="danger" size="sm" />

<Tag
  label="region: west"
  variant="accent"
  removable
  onRemove={handleRemove}
/>

Props

Prop	Type	Default	Description
`label`	`string`	required	Visible tag text and remove button label source.
`variant`	`'neutral' \| 'accent' \| 'warm' \| 'danger'`	`'neutral'`	Visual variant.
`size`	`'sm' \| 'md'`	`'md'`	Size preset.
`removable`	`boolean`	`false`	Shows a remove button. Also enabled when `onRemove` is provided.
`disabled`	`boolean`	`false`	Disables the remove affordance and dims the tag.
`onRemove`	`(event: MouseEvent \| KeyboardEvent) => void`	--	Called when the remove affordance is activated.
`class`	`string`	--	Additional CSS classes.

Accessibility

Label: The visible label is the source of truth for the tag text.
Remove button: Removable tags render a native button with a label like Remove region: west.
Keyboard: Remove activates on click, Enter, and Space. Focus uses the shared visible ring.
Color: Variants should support text meaning; do not communicate status by color alone.

Do / Don't

Do

Use short labels for status, metadata, and active filters that benefit from scanning.

Don't

Don't put long sentences or primary actions inside tags. Use regular text and buttons for those.