Tag

atoms

Removable label chip — used in filter bars, multi-select displays, taxonomy. Has a × button with aria-label='Remove {label}'.

ARIA Role: group

Demo

MusicConferenceOutdoor

AvailableAlmost fullSold out

Props

Prop	Type	Required	Default	Description
`label`	`string`	Yes	`—`
`onRemove`	`() => void`	No	`—`

TypeScript Interface

interface TagProps {
  label: string;
  onRemove?: () => void;
  variant?: 'neutral' | 'brand' | 'success' | 'warning' | 'error';
  size?: 'sm' | 'md';
  disabled?: boolean;
}

Assertions (NASA Rule 5)

[type]label required; onRemove required if removable(NASA Rule 5)
[aria]Remove button must have aria-label='Remove {label}'(WCAG 4.1.2)

Usage

Import

import { Tag } from '@epasslive/design-system'

Basic

<Tag />

With Variants

<Tag variant="primary" size="md" />