コンポーネント一覧
Badge
色だけで意味を伝えない。success と danger は色覚特性によって区別できない。必ず文言を伴わせる。
デモ
使い分け
こうする
- 状態か分類を 1 語で示す
- 同じ意味には同じ色を使い続ける
こうしない
- Badge を押せるようにしない。押すならボタン
- 文を入れない。2 語を超えたら本文に書く
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| withDot | boolean | 先頭にドットを表示する |
| children | ReactNode | |
| classNames | ClassNames<typeof badgeSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- dot
- label必須
アクセシビリティ
- `dot` は `aria-hidden`。色や点だけで状態を伝えず、必ずテキストでも読めるようにする
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。