Button
押した結果が同じ画面で完結するなら Button、別ページへ移るならリンクを使う。
デモ
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' | |
| onPress | () => void | 押下時。`onClick` ではないので注意（タッチ・ペン・キーボードを統一的に扱う） |
| startContent | ReactNode | |
| endContent | ReactNode | |
| children | ReactNode | |
| classNames | ClassNames<typeof buttonSlots> |
Slot
構成部位に data-slot が出力されます。 CSS の上書きやテストはこれを狙ってください。
- root必須
- startContent
- label必須
- endContent
- spinner
アクセシビリティ
- Enter / Space で発火する。`onPress` はマウス・タッチ・ペン・キーボードを統一的に扱う。 `isLoading` 中の spinner は `aria-hidden`
- キーボードだけで操作できます。フォーカスリングはコントラスト比 3:1 以上です。
- 本文のコントラスト比は light / dark とも 4.5:1 以上を検査で保証しています。
prefers-reduced-motionが有効なときはアニメーションを行いません。