kaze風
FAB
フローティングアクションボタン
プレビュー
使いどころ
使う場面
- 画面の主役になる操作を 1 つだけ、スクロールしても常に押せる位置に置く（新規作成、メッセージ作成など）
- モバイルの一覧画面や、キャンバス上で追加操作が必要な画面
- ラベルが要る場合は extended で、アイコンと文言を並べる
使わない場面
- 操作が複数ある画面。FAB は 1 画面に 1 つまで。ほかの操作は Button や Dropdown にまとめる
- フォームの送信や保存。フォームの末尾に Button の primary を置く
- ページ内の通常の導線。Button を使う。FAB は position: fixed で画面に固定されるので、本文の流れの中には置けない
使い方
<FAB label="追加">
<PlusIcon />
</FAB>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | なし | ボタンのアクセシブルラベル（必須） |
variant | "primary" | "secondary" | "primary" | スタイルバリアント |
size | "sm" | "md" | "lg" | "md" | ボタンのサイズ |
position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | 配置位置 |
extended | boolean | false | ラベルテキストを表示するかどうか |
asChild | boolean | なし | 子要素にスタイルと振る舞いを委ねる（Next.js の Link など） |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | FAB にフォーカスを移す |
| Enter / Space | FAB を押す |
アクセシビリティ
- label は必須。extended でないときは aria-label になり、extended のときは見えているラベル文言が名前になる
- disabled のときは aria-disabled も付く。asChild でリンクにした場合は、属性の代わりにクリックを止める
- 固定表示なので、末尾の項目やフッターを隠さないよう、スクロール領域の下に余白を取る
文言
- 「新規作成」「メッセージを書く」のように、押すと何が起きるかを動詞で書く。アイコンだけの FAB でも label に同じ文言を入れる