primitives · @awesome-ds/react
Button
読み込み中・無効状態を備えた主要アクション。
状態マトリクス
通常
ホバー
フォーカス
押下中
無効
読み込み中
構造
- button要素
- 操作ラベル
- 読み込み表示
キーボード操作契約
EnterまたはSpaceで一度だけ実行します。無効・読み込み中は実行しません。
スクリーンリーダー契約
buttonとして名前、無効状態、処理中状態を通知します。処理中も操作名は変えません。
コンテンツ規則
- 具体的な動詞から始めます。
- 処理中の文言は実行した操作と一致させます。
公開API
| プロパティ | 型 | 必須 | 説明 |
|---|---|---|---|
children | ReactNode | 必須 | 表示または読み上げ対象となる内容。 |
variant | "primary" | "secondary" | "ghost" | "danger" | — | 意味に応じた操作の強調度。 |
size | "sm" | "md" | "lg" | — | トークンで定義したコントロール寸法。 |
loading | boolean | — | 重複操作を防ぐ処理中状態。 |
…native | ButtonHTMLAttributes<HTMLButtonElement> | — | 対応するネイティブ要素の標準属性。 |
環境適応契約
- RTL
- 論理方向の余白と配置を使い、DOMとフォーカスの順序を保ちます。方向を持つアイコンだけを反転します。
- ハイコントラスト
- 背景色だけに頼らず、境界・フォーカス・状態をシステムカラーでも判別可能にします。
- 動きを減らす設定
- 状態とフォーカスの連続性を残し、移動や装飾的な遷移を取り除きます。
検証ID
ライブ表示
ライブ表示
コピー可能な実装例
import { Button } from "@awesome-ds/react";
<Button loading>Save</Button>