Tag

Tag is a slightly larger relative of Badge with rounded-rectangle geometry and optional press and remove handlers. Use it for filter pills, multi-select chips, or attribute lists.

Chip is exposed as an alias for Tag for naming familiarity with design systems that prefer the chip terminology. Both refer to the same component.

Import

import { Tag, Chip } from '@mindees/ui';

Usage

<Tag tone="primary">Design</Tag>

<Tag tone="warning" onRemove={() => remove('beta')}>
  Beta
</Tag>

<Tag onPress={() => toggleFilter('open')}>Open</Tag>

Props

Prop	Type	Default	Description
tone	'neutral' | 'primary' | 'success' | 'warning' | 'danger'	'neutral'	Semantic colour family. Drives both background tint and text colour.
size	'sm' | 'md'	'md'	Controls padding and text variant (caption for sm, label for md).
onPress	() => void	—	Tap handler. When set, the tag renders as a Pressable with accessibilityRole="button".
onRemove	() => void	—	Adds a trailing close icon button. The icon has its own accessibilityLabel="Remove tag".
children	ReactNode	—	Tag contents — usually a short string.

Accessibility

Static tags use accessibilityRole="text". Tags with onPress use accessibilityRole="button". The remove icon is a separate pressable with an 8-dp hitSlop and its own label, so screen readers announce removal independently of the tag's main action.