Tag

Tags are compact labels for categorization, filtering, or attribute display. Use for metadata, categories, or removable selections.

Preview

HexagramTrigramActive

Basic Usage

DefaultGoldSuccess

<Tag>Default</Tag>
<Tag color="gold">Gold</Tag>
<Tag color="success">Success</Tag>

Sizes

SmallMediumLarge

<Tag size="sm">Small</Tag>
<Tag size="md">Medium</Tag>
<Tag size="lg">Large</Tag>

Variants

FilledOutlinedSubtle

<Tag variant="filled" color="gold">Filled</Tag>
<Tag variant="outlined" color="gold">Outlined</Tag>
<Tag variant="subtle" color="gold">Subtle</Tag>

Colors

DefaultGoldSuccessWarningErrorInfo

<Tag color="default">Default</Tag>
<Tag color="gold">Gold</Tag>
<Tag color="success">Success</Tag>
<Tag color="warning">Warning</Tag>
<Tag color="error">Error</Tag>
<Tag color="info">Info</Tag>

Removable Tags

Heaven ×

Earth ×

Water ×

<Tag color="gold" onRemove={() => handleRemove('heaven')}>Heaven</Tag>
<Tag color="gold" onRemove={() => handleRemove('earth')}>Earth</Tag>
<Tag color="gold" onRemove={() => handleRemove('water')}>Water</Tag>

Interactive Tags

ActiveInactiveInactive

const [selected, setSelected] = useState('active');

<Tag
  onPress={() => setSelected('active')}
  selected={selected === 'active'}
>
  Active
</Tag>

With Icon

☯ Yin-Yang

✓ Complete

<Tag color="gold" leftIcon={<YinYangIcon />}>Yin-Yang</Tag>
<Tag color="success" leftIcon={<CheckIcon />}>Complete</Tag>

<TagGroup>
  <Tag color="gold">Hexagram</Tag>
  <Tag>Trigram</Tag>
  <Tag>Reading</Tag>
  <Tag>Oracle</Tag>
  <Tag>Divination</Tag>
</TagGroup>

API Reference

Tag Props

Prop	Type	Default	Description
`children`	`string`	Required	Tag content
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Tag size
`variant`	`'filled' \| 'outlined' \| 'subtle'`	`'subtle'`	Tag variant
`color`	`'default' \| 'gold' \| 'success' \| 'warning' \| 'error' \| 'info'`	`'default'`	Tag color
`leftIcon`	`ReactNode`	-	Left icon
`onRemove`	`() => void`	-	Remove handler
`onPress`	`() => void`	-	Press handler
`selected`	`boolean`	`false`	Selected state
`style`	`ViewStyle`	-	Custom styles

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Child tags
`wrap`	`boolean`	`true`	Wrap tags
`gap`	`number`	`8`	Gap between tags
`style`	`ViewStyle`	-	Custom styles

Tag