Tag

A label or chip component for categorical data. Becomes interactive when an onClick handler is provided.

Overview

Tag renders static categorical labels by default. When an onClick prop is provided, it becomes a <button> — enabling keyboard focus and click interaction on the entire chip. Icon slots (startIcon, endIcon) can have their own independent onClick handlers via slotProps, enabling close/remove actions without triggering the main chip click.

disabled maps to aria-disabled (not the HTML disabled attribute) because the Tag conditionally renders as either a <div> or <button>.

Import

import { Tag } from '@unflow/ui/components/Tag';

Props

Prop	Type	Default	Description
`label`	`string`	—	Required. Tag text
`variant`	`TagVariant`	`'white'`	Color family
`size`	`'xs' \| 'sm' \| 'md'`	`'xs'`	Tag size
`startIcon`	`ReactNode`	—	Icon before the label
`endIcon`	`ReactNode`	—	Icon after the label
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—	Makes the tag a button
`disabled`	`boolean`	`false`	Sets `aria-disabled="true"`

Variants

22 color variants across 11 families, each with a solid and secondary (light background) option:

white

grey

red

green

yellow

cyan

teal

violet

indigo

pink

fuschia

greySecondary

redSecondary

greenSecondary

yellowSecondary

cyanSecondary

tealSecondary

violetSecondary

indigoSecondary

pinkSecondary

fuschiaSecondary

<Tag label="available" variant="green" />
<Tag label="error" variant="red" />
<Tag label="warning" variant="yellow" />
<Tag label="info" variant="indigo" />
<Tag label="neutral" variant="grey" />

With icons

Start icon

End icon

Both icons

import { Check } from '@unflow-ui/icons/security-warnings/check';
import { X } from '@unflow-ui/icons/security-warnings/x';

<Tag label="Active" startIcon={<Check />} variant="green" />
<Tag label="Removed" endIcon={<X />} variant="red" />
<Tag label="Both" startIcon={<Check />} endIcon={<X />} variant="indigo" />

Sizes

<Tag label="XS" size="xs" />
<Tag label="SM" size="sm" />
<Tag label="MD" size="md" />

Interactive

Icon action

When onClick is provided, the entire tag becomes a <button>:

<Tag label="Clickable" onClick={() => console.log('clicked')} variant="indigo" />

Icon onClick handlers in slotProps stop propagation — they don't trigger the main chip handler:

<Tag
  label="Filter"
  endIcon={<X />}
  onClick={() => console.log('chip clicked')}
  slotProps={{
    endIcon: { onClick: () => console.log('remove clicked') },
  }}
/>

Customization (slotProps)

Slot	Props	Description
`label`	`BaseHTMLProps<HTMLParagraphElement>`	Override the text element
`startIcon`	`BaseHTMLProps<HTMLDivElement \| HTMLButtonElement>`	Override start icon wrapper
`endIcon`	`BaseHTMLProps<HTMLDivElement \| HTMLButtonElement>`	Override end icon wrapper

Accessibility

Static tags render as <div> — no focus or keyboard interaction.
Tags with onClick render as <button> — keyboard focusable, activatable with Enter/Space.
disabled uses aria-disabled="true" rather than disabled because the tag is conditionally a <div>.
Provide meaningful label text — tags are inline content and should be self-describing.

On this page