フローティングボタン
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 FAB with a numeric badge whose count is announced in the accessible name and clamps to 99+.
<!--
The count belongs in the accessible name ("Notifications, 5 unread"), not only
in a coloured pill - so the badge is aria-hidden and the button's aria-label
carries the number. Counts over 99 clamp to "99+" so the badge cannot grow
wide enough to escape the FAB.
-->
<button type="button" aria-label="Notifications, 5 unread" class="relative fixed bottom-6 right-6 z-40 inline-flex h-14 w-14 items-center justify-center rounded-full bg-blue-600 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] hover:bg-blue-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-600 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:bg-blue-500 dark:hover:bg-blue-400 dark:focus-visible:ring-blue-400 dark:focus-visible:ring-offset-gray-950">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9M13.7 21a2 2 0 0 1-3.4 0" /></svg>
<span aria-hidden="true" class="absolute -right-1 -top-1 inline-flex h-6 min-w-6 items-center justify-center rounded-full border-2 border-white bg-rose-600 px-1 text-xs font-semibold text-white dark:border-gray-950">5</span>
</button>| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
count | number | 0 | バッジに表示される数値。99 を超えると「99+」と表示されます。 |
label | string | 'Notifications' | 読み込み中に読み上げられるアクセシブルなラベル。 |
onClick | () => void | - | ユーザーがコントロールを実行したときに発火します。 |
The count belongs in the accessible name ("Notifications, 5 unread"), so the badge is `aria-hidden` and the `aria-label` carries the number. Counts over 99 clamp to "99+" so the badge cannot grow wide enough to escape the FAB.