フローティングボタン
Basic Floating Action Button
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
#fab#floating#icon
6 個のフレームワーク初級
Loading…
A pill-shaped FAB carrying its icon and a visible label, for when the action needs saying out loud.
<!--
The visible label IS the accessible name here, so there is no aria-label to
keep in sync - and no chance of the two drifting apart. That is the reason to
reach for an extended FAB over a round one whenever you have the width.
-->
<button class="fab-ext" type="button">
<svg class="fab-ext__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false">
<path d="M12 5v14M5 12h14" />
</svg>
New invoice
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
label必須 | string | - | 読み込み中に読み上げられるアクセシブルなラベル。 |
icon | ReactNode | - | コンテンツと並べて表示されるアイコン要素。 |
onClick | () => void | - | ユーザーがコントロールを実行したときに発火します。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
The reason to reach for this over the round one is not shape, it is that the label is *visible text* - which makes it the accessible name automatically. There is no `aria-label` to write, therefore no `aria-label` to forget to update when "New invoice" becomes "New estimate". Two strings cannot drift when there is only one. Keep the icon `aria-hidden`: it repeats the label, and a screen reader announcing "plus New invoice" is noise. Budget the width honestly - an extended FAB is `auto`-width and a long label will happily run under a phone's edge; two words is the working limit, and if you need three you probably need a toolbar. Below `sm` many designs swap this for the round variant, which is a `hidden sm:inline-flex` on one and the inverse on the other.