Floating Action Button
The primary action of a screen, such as Compose or New, floating above the content.Sizes and variants
Preview
Code
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { Fab } from '@advui/core'
import { EditIcon } from '@advui/icons'
<Fab icon={<EditIcon />} aria-label="Compose" onPress={compose} />
<Fab icon={<EditIcon />} label="Compose" placement="bottom-end" onPress={compose} />Examples
Extended, pinned to a corner
A label makes the action clear; placement keeps it above the content.Preview
Code
InboxNo new messages.
API reference
Fab
| Prop | Type | Default | Description |
|---|---|---|---|
icon required | ReactNode | — | The action’s icon. |
label | string | — | Visible text: makes it an extended FAB. Icon-only FABs need `aria-label`. |
variant | 'soft' | 'primary' | 'secondary' | 'surface' | 'soft' | `soft` is Material’s primary container color. |
size | 'sm' | 'md' | 'lg' | 'md' | 40, 56 or 96 square (icon-only). |
placement | 'bottom-end' | 'bottom-start' | 'bottom-center' | — | Pins it to a corner of the nearest positioned parent. |
disabled | boolean | false | Not interactive. |
Accessibility
- A button:
<button>on web, the button role on iOS and Android. - Icon-only FABs need an
aria-labelnaming the action (“Compose”), not the icon. - Use one FAB per screen for its most important action.
- The smallest size is 40pt; keep it clear of other touch targets.
| Key | Action |
|---|---|
| Enter / Space | Runs the action. |
Responsive behavior
With placement it floats 16px from the edges of its container. Leave space below scrolling content so it never covers the last item.
Platform notes
Web
A native
<button type="button"> with a shadow that lifts on hover.iOS
Keep it above the home indicator: give the container a bottom safe-area inset.
Android
Uses elevation for its shadow. With
androidRipple (on in material()), presses show the native ripple.