アクション
Button
クリックで操作を実行する、基本のボタン。variant（見た目の種類）と status（色で表す意味）を組み合わせて使い分けます。
ReactVueWeb Components
Storybook で見る プレイグラウンド
使用例
<Button status="danger" variant="outline" onClick={remove}>Delete</Button>
<Button as="a" href="/docs">Read the docs</Button>設定できる項目
| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
variant | ButtonVariant | solid | Visual style. @default 'solid' |
status | ButtonStatus | primary | Semantic intent / color. @default 'primary' |
size | ButtonSize | md | Size. @default 'md' |
block | boolean | false | Stretch to fill the container width. @default false |
loading | boolean | false | Show a spinner and disable interaction. @default false |
loadingLabel | string | Loading | Accessible label announced while `loading` is true. @default 'Loading' |
startIcon | ReactNode | — | Icon rendered before the label. |
endIcon | ReactNode | — | Icon rendered after the label. |
disabled | boolean | — | Disable the button. |
アクセシビリティ
- 文字と背景の明るさの差をしっかり取り、読みやすくしています。ライトでもダークでも、見やすさの国際基準 WCAG の最高ランク AAA（明るさの差が 7:1 以上）を満たします。
- マウスがなくても、キーボードだけですべての操作ができます。
- いまどこを操作しているかを示す枠（フォーカスの囲み）が、常にはっきり見えます。
- 利用者が「画面の動きを減らす」設定にしているときは、過剰なアニメーションを止めます。
どのコンポーネントも、だれにとっても使いやすいように、見やすさの国際基準 WCAG の最高ランク AAA（WCAG 2.1 AAA）を満たすよう作っています。