TAG

Accent-colored outlined marker for keywords, filters, or classifications. Optional `onRemove` renders a trailing × button.

Live demo

import { Tag } from '@cathode-ui/react';

Name	Type	Default	Required	Description
`children`	`ReactNode`	—	yes
`accent`	`'neutral'\|'info'\|'success'\|'warning'\|'danger'\|'amber'\|'pink'\|'purple'\|'teal'\|'grey'`	`neutral`	—
`onRemove`	`() => void`	—	—	When set, renders a close button after the label.
`removeLabel`	`string`	`Remove`	—	ARIA label for the remove button.

<Tag accent="info">ENGINEERING</Tag>

<Tag accent="amber" onRemove={() => drop("p1")}>P1</Tag>

Role: text

Haptic	`none`
Sound	`none`

  
  ← All components