Tag
fandhe-frontend-pre-styled-ui の tag mod が提供するスタイル済み Tag 部品です。
削除可能なラベル表示部品です。close_trigger（type="button"）を組み合わせることで削除操作を持つ Tag を構成できますが、aria-label・視覚内容（×等）は呼び出し側が渡す責務です。削除操作を持たない単純なラベル表示には Badge を検討してください。
variant（Solid/Subtle（既定）/Outline/Surface）・size（Xs〜Xl）・colorPalette（6 値、既定 Accent）の 3 軸を持ちます（イシュー #1573 で参照サイト〔chakra-ui〕基準へ調整し、Surface variant・close-trigger の hover/キーボードフォーカスリングを追加）。
Demo
ラベル・分類・除去可能なチップ表示。variant / size / colorPalette を組み合わせます。close-trigger は data-action 属性の出力のみを担い、実際のクリック処理は wasm 層のスコープです。
Variant
SolidSubtleOutlineSurface
Size
TagTagTagTagTag
Palette
AccentInfoSuccessWarningDangerNeutral
SolidSubtleOutlineSurface
Features
- TagVariant（Solid/Subtle/Outline/Surface、crates/pre-styled-ui/src/tag.rs。イシュー #1573 で Surface を追加）で塗り方を切り替える
- colorPalette 軸（tag.rs の TagProps）でセマンティック色を選択する
- Subtle/Outline/Surface は 6 役割 palette の淡色トークンを消費する（tag.rs、イシュー #1573）
- close_trigger（<button type="button">）で削除可能な Tag を構成できる（tag.rs）
- close_trigger は hover 面・キーボードフォーカスリングを持つ（イシュー #1573。Solid variant ではリング色を --fandhe-palette-fg へ切り替え、背景との同化を避ける）
- close_trigger 自体は children/aria-label を持たないため呼び出し側が視覚内容とアクセシブルネームを渡す責務を持つ（tag.rs）
Anatomy
root
label
close-triggerAPI Reference
Arguments
| Name | Type | Default | Description |
|---|---|---|---|
variant | TagVariant | Subtle | 塗り方（tag.rs の TagVariant、#[default] は Subtle。イシュー #1573 で Surface を追加）。 |
size | Size | Md | サイズ（tag.rs の TagProps）。 |
palette | ColorPalette | Accent | colorPalette 軸（tag.rs の TagProps）。 |
Data Attributes
| Part | Attribute | Observed Values |
|---|---|---|
close-trigger | data-action | remove_tag |
CSS Variables
| Variable | Default |
|---|---|
--fandhe-tag-close-ring-color | — |
Examples
Removable
close_trigger を付与した削除可能な Tag の例です。
betaAccessibility
WAI-ARIA
| Attribute | Description |
|---|---|
| (呼び出し側責務) | close_trigger の aria-label・視覚内容（×等）は呼び出し側が渡す責務であり、本部品自体は固有の ARIA を固定出力しない（tag.rs）。 |