Default
Show the codeHide the code
Default, code
<FloatingActionButton icon={Plus} label="New message" fixed={false} />FloatingActionButton
The one primary action of a mobile screen: a 56px button with a required name, optionally with a visible label.
- Pro, mobile
- Version 2.0.0-rc.1
- APG pattern: Button
Examples
Still previews of the real component, rendered from its stories. Pro code isn’t public, so nothing in them responds. Switch the theme and density for every preview at once.
Extended
Show the codeHide the code
Extended, code
<FloatingActionButton fixed={false} icon={Pencil} label="Compose" extended />Tokens
The 10 design tokens FloatingActionButton reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 10 tokens
| Token | Value now | CSS variable |
|---|---|---|
| button.primary.bg | … | --sd-button-primary-bg |
| button.primary.bg-hover | … | --sd-button-primary-bg-hover |
| button.primary.bg-pressed | … | --sd-button-primary-bg-pressed |
| button.primary.fg | … | --sd-button-primary-fg |
| elevation.3 | … | --sd-elevation-3 |
| layer.raised | … | --sd-layer-raised |
| motion.duration.fast | … | --sd-motion-duration-fast |
| motion.easing.standard | … | --sd-motion-easing-standard |
| radius.xl | … | --sd-radius-xl |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
Install
Pro components come as source from the SuperDuper registry, with a licence key from Solo, Team or Studio. The registry and checkout aren’t open yet.
Add it from the registry (Pro licence key)
npx shadcn@latest add @superduperui/floating-action-buttonThen import it
import { FloatingActionButton } from "@/components/ui/floating-action-button"Props
| Prop | Type | What it does |
|---|---|---|
iconrequired | LucideIcon | |
labelrequired | string | Required name. Shown as text when `extended`, otherwise it is the aria-label. |
extended | booleanDefault false | Show the label next to the icon (extended FAB). |
fixed | booleanDefault true | Pin to the bottom end of the viewport, above a TabBar. Default true. |
When to use it
Use it for
- The main action of a mobile list screen (new message, add)
Use something else for
- More than one main action
- Desktop: use Button
Accessibility
Screen readers announce "New message, button".
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6, 2.3.3.
Compact density meets AA (2.5.8, 24px targets), not AAA.
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 60 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 55 text runs: 0 below 7:1, lowest 11.42:1 |
| Target size | 24 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 18 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 1 of 1, Firefox 1 of 1, WebKit 1 of 1 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the button by its name |
In Figma
The Figma component is FloatingActionButton, with State (Default, Hover, Focus, Pressed). The Figma library isn’t published yet.
Figma to code: Extended → extended; State (Default, Hover, Focus, Pressed; preview only); Label → label; Icon → icon.