アクション
Split button スプリットボタン
よく使う操作のボタンと、関連する操作のメニューを開く小さな矢印ボタンをつなげた部品。
デモ
別名
- Combo button — Carbon Design System
見分けるポイント
1つのボタンが細い線で2つに分かれ、ラベルのある本体と、下向き矢印だけの細い部分からなる。
挙動
- 本体を押すと、既定の操作がすぐに実行される。
- 矢印を押すと他の操作のメニューが開き、選ぶとその操作を実行してメニューが閉じる。
- 2つの部分は別々のボタンで、それぞれ Tab でフォーカスできる。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 本体のボタンと矢印のボタンの間を移動する。 |
| Enter / Space | 本体では既定の操作を実行する。矢印ではメニューを開き、最初の項目にフォーカスする。 |
| ↓ / ↑ | 矢印ではメニューを開く。メニュー内では項目を移動する。 |
| Esc | メニューを閉じ、矢印のボタンにフォーカスを戻す。 |
似た部品との違い
出典
- Carbon Design System: Menu buttons (Combo button) (最終確認日: )
- MUI: Button Group (Split button) (最終確認日: )
- WAI-ARIA APG: Menu Button Pattern (最終確認日: )