Floating Buttons
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 frameworksBeginner
Loading…
A round FAB that expands into a labelled pill on hover and keyboard focus, its label doubling as the accessible name.
<!--
The label is real text inside the button, so it IS the accessible name even
while it is clipped to width 0 - no aria-label needed, and nothing to keep in
sync. It reveals on hover AND focus-visible: a reveal that only answers to the
mouse is invisible to the keyboard users who most need to know what the circle
does. It expands leftward (label before icon) so a right-anchored FAB never
runs off the edge.
-->
<button type="button" class="group fixed bottom-6 right-6 z-40 inline-flex h-14 items-center justify-end rounded-full bg-blue-600 px-4 text-white shadow-[0_12px_28px_-8px_rgba(15,23,42,0.45)] transition-colors 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">
<span class="max-w-0 overflow-hidden whitespace-nowrap text-[0.9375rem] font-semibold opacity-0 transition-all duration-300 group-hover:mr-2 group-hover:max-w-xs group-hover:opacity-100 group-focus-visible:mr-2 group-focus-visible:max-w-xs group-focus-visible:opacity-100 motion-reduce:transition-none">New task</span>
<svg class="h-6 w-6 shrink-0" 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 | Type | Default | Description |
|---|---|---|---|
labelrequired | string | - | Accessible label announced while loading. |
icon | ReactNode | - | Icon element rendered alongside the content. |
onClick | () => void | - | Fired when the user activates the control. |
The label is real text inside the button, so it is the accessible name even while clipped to width 0 - no `aria-label` to keep in sync. It reveals on hover AND `focus-visible`, and expands leftward so a right-anchored FAB never runs off the edge.