ボタンは、Alius インターフェースでアクションをトリガーする主要な手段です。すぐに認識でき、明確にラベル付けされ、プラットフォーム全体で一貫してスタイリングされる必要があります。
ボタンタイプ
プライマリ
- 特定のエリアで最も重要なコールトゥアクション
- ブランドカラーの塗りつぶし背景
- 白またはコントラストテキスト
- ページまたはセクションの最も重要な単一アクションに使用
セカンダリ
- 代替またはサポートアクション
- ブランドカラーのボーダーとテキスト付きのアウトラインスタイル
- 透明またはニュートラルな背景
- 利用可能だがプライマリフォーカスではないアクションに使用
ターシャリ
- 低強調アクション
- テキストのみまたはゴーストのような外観の最小スタイリング
- 重要度の低いアクション、閉じるボタン、オプションステップに使用
デンジャー
- 破壊的または取り消し不能なアクション（削除、除去、リセット）
- 赤背景（塗りつぶし）または赤テキスト/ボーダー（アウトライン）
- 破壊的操作には常に明示的なユーザー確認が必要
- 非破壊的アクションにデンジャースタイルを使用してはならない
ゴースト
- 透明な背景と控えめなテキスト
- 標準ボタンが視覚的に重くなるコンテキストで使用
- ホバー時に控えめな背景で可視化
- ツールバーアクション、インラインコントロール、密集した UI エリアに使用
リンクボタン
- テキストリンクのように見えるがボタンとして動作
- 背景、ボーダー、パディングなし — 下線付きテキストのみ
- セカンダリナビゲーションアクションまたはインライントリガーに使用
- 送信ではなくナビゲーションするアクションに限定
ボタン状態
デフォルト
- インタラクションが発生していない時のボタンの静止状態
- すべてのボタンタイプスタイルがデフォルト状態に適用
ホバー
- ボタンがインタラクティブであることを示すビジュアル変化
- わずかな背景の暗化または明化
- カーソルがポインターに変化
アクティブ（押下中）
- ボタンが押されている間のビジュアル変化
- ホバー状態より暗くまたは目立つ
- クリアクションの触覚フィードバックを提供
フォーカス
- キーボードナビゲーション用の可視フォーカスリング
- アクセシビリティコンプライアンスに必須
- ブランドカラーまたは高コントラストのアウトラインを使用
- ホバー状態と区別可能である必要がある
無効
- ボタンが現在操作可能でないことを示す
- 透明度の低下、くすんだカラー
- カーソルが「不可」に変化
- なぜボタンが無効かを説明するツールチップを含める（コンテキストから明らかでない場合）
ローディング
- ボタン内にスピナーまたは進行状況インジケーターを表示
- ボタンテキストが動名詞に変化する場合がある（「保存」→「保存中…」）
- ローディング中はボタンが非インタラクティブ
- レイアウトシフトを防ぐためサイズを維持
ボタンの原則
- エリアごとに1つのプライマリアクション — 各セクションまたはページには明確に支配的なボタンが1つだけであるべき
- デンジャー操作は区別必须 — 破壊的アクションはプライマリアクションから視覚的・空間的に分離する必要がある
- 動詞ベースのコピー — ボタンラベルは動作動詞を使用：「ダウンロード」、「作成」、「削除」、「保存」、「実行」
- 曖昧なボタンラベルは避ける — より具体的な動詞が利用可能な場合、「送信」、「OK」、「完了」などのラベルを避ける
- 一貫したサイズ — 小、中、大のボタンサイズを定義し一貫して使用
- アイコン + テキスト — アイコンとテキストの組み合わせを推奨；スペースが限られ、アイコンが普遍的に理解される場合のみアイコン単独が許容される