コンポーネント一覧
Button
押した結果が同じ画面で完結するなら Button、別ページへ移るならリンクを使う。
デモ
使い分け
こうする
- 主操作を 1 つだけ primary にする。残りは outline / ghost で従属させる
- 文言は動詞で終える（「保存」「削除」）。「OK」「はい」は何が起きるか分からない
- 取り消せない操作は danger にし、Modal で確認を挟む
こうしない
- 別ページへ移る操作にボタンを使わない。リンクを使う（右クリックで開ける、履歴に残る）
- 同じ行に primary を 2 つ並べない。どちらが主か決めきれていない印
- 読み込み中に isDisabled だけで済ませない。何を待っているかは isLoading が示す
Props
| 名前 | 型 | 説明 |
|---|---|---|
| variant | 'solid' | 'outline' | 'soft' | 'ghost' | 'plain' | |
| size | 'sm' | 'md' | 'lg' | |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | |
| isDisabled | boolean | 無効化する。`disabled` ではないので注意（React Aria 準拠） |
| isLoading | boolean | 読み込み中。spinner slot を描画し、操作を受け付けない |
| type | 'button' | 'submit' | 'reset' | |
| aria-label | string | アイコンだけで文字を持たないボタンの名前。文字があるボタンには不要 |
| onPress | () => void | 押下時。`onClick` ではないので注意（タッチ・ペン・キーボードを統一的に扱う） |
| startContent | ReactNode | |
| endContent | ReactNode | |
| children | ReactNode | |
| classNames | ClassNames<typeof buttonSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- startContent
- label必須
- endContent
- spinner
アクセシビリティ
| キー | 動作 |
|---|---|
| Enter / Space | 押す |
- Enter / Space で発火する。`onPress` はマウス・タッチ・ペン・キーボードを統一的に扱う。 `isLoading` 中の spinner は `aria-hidden`。文字を持たないアイコンだけのボタンには `aria-label` で名前を与える
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。