#Tag

Small labels for categorizing, filtering, or marking items.

#When to Use

• To categorize or label content
• For status indicators or filters
• As removable tags in multi-select scenarios

#Import

import { Tag } from "orizon";

#Examples

#Basic

<Tag>Default</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="green">Green</Tag>
<Tag color="red">Red</Tag>
<Tag color="orange">Orange</Tag>
<Tag color="purple">Purple</Tag>

#Closable

<Tag closable onClose={(e) => console.log("closed")}>
  Closable
</Tag>

#Borderless

<Tag bordered={false} color="blue">Blue</Tag>
<Tag bordered={false} color="green">Green</Tag>

#Status Tags

<Tag color="success">Success</Tag>
<Tag color="processing">Processing</Tag>
<Tag color="error">Error</Tag>
<Tag color="warning">Warning</Tag>

#Checkable

<Tag.CheckableTag checked={checked} onChange={setChecked}>
  Toggleable
</Tag.CheckableTag>

#API

#TagProps

• color — string — Tag color (preset or custom hex)
• closable — boolean — Show close button (default: false)
• bordered — boolean — Show border (default: true)
• icon — ReactNode — Icon before text
• closeIcon — ReactNode — Custom close icon
• onClose — (e: MouseEvent) => void — Close callback

#Tag.CheckableTag Props

• checked — boolean — Checked state
• onChange — (checked: boolean) => void — Toggle callback