BlueAI Tag
カテゴリやラベルを表示するタグコンポーネント。削除ボタン付きにも対応。
|
import { Tag } from "@blueai/ui"Examples
Colors
GrayBlueGreenRedAmberPurpleBrand
<Tag color="gray">Gray</Tag>
<Tag color="blue">Blue</Tag>
<Tag color="green">Green</Tag>
<Tag color="red">Red</Tag>
<Tag color="amber">Amber</Tag>
<Tag color="purple">Purple</Tag>
<Tag color="brand">Brand</Tag>Removable
ReactTypeScriptTailwind
<Tag color="blue" onRemove={() => console.log("removed")}>React</Tag>
<Tag color="green" onRemove={() => console.log("removed")}>TypeScript</Tag>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children* | ReactNode | — | タグの内容 |
| color | "gray" | "blue" | "green" | "red" | "amber" | "purple" | "brand" | — | 色（デフォルト: gray） |
| onRemove | () => void | — | 削除ボタンクリック時のコールバック |
| className | string | — | 追加CSSクラス |