フローティングボタン
Extended Floating Action Button
A pill-shaped FAB carrying its icon and a visible label, for when the action needs saying out loud.
#fab#extended#pill
6 個のフレームワーク初級
Loading…
A round, fixed icon button for the one action a screen is really about - with a ring that survives any backdrop.
<!--
aria-label is the whole component's accessibility budget: the SVG is
aria-hidden, so without the label a screen reader announces "button" and
nothing else. It is not optional decoration.
-->
<button class="fab" type="button" aria-label="New message">
<svg class="fab__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>
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
ariaLabel必須 | string | - | ボタンのアクセシブルな名前。アイコンのみのボタンでは必須です。 |
icon | ReactNode | - | コンテンツと並べて表示されるアイコン要素。 |
onClick | () => void | - | ユーザーがコントロールを実行したときに発火します。 |
disabled | boolean | false | 操作を無効にし、コントロールを淡色表示にします。 |
className | string | - | ルート要素にマージされる追加クラス。 |
An icon is not a name. The SVG here is `aria-hidden`, so strip the `aria-label` and a screen reader announces "button" and stops - the user is told something is clickable and nothing about what it does. That label is the component, the circle is decoration. The other detail worth keeping is the focus ring: a blue ring drawn straight onto a blue button is invisible, so the CSS stacks two shadows - an inner ring in the *page* colour, then the ring itself - and the Tailwind tab does the same with `ring-offset-2 ring-offset-white dark:ring-offset-gray-950`. Change the FAB's background and you must change that offset to match whatever it now sits on, or the ring disappears again. The hover lift is behind `motion-safe:`; the colour change is not, because that is feedback rather than motion. One FAB per screen - a second one means neither is *the* action.