FloatingButton
React floating action button for the one primary action on a screen: icon-only or extended pill, on plain or colored surfaces, with asChild for links. RTL-aware.
FloatingButton surfaces the single most important action on a screen. An icon is required; add children for an extended pill. Positioning is up to you.
When to use
Use FloatingButton when a screen has one dominant action that must stay reachable while the user scrolls. Starting a new request in a citizen portal is a typical case. Keep one per screen. If the action belongs to a form or a card, use Button instead.
The component does not position itself. Place it with your own layout so it does not cover content or the bottom navigation on mobile.
Examples
Props
Props declared by FloatingButton. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "black" | ||
size | "sm" | "lg" | ||
onColor | boolean | ||
iconrequired | react.ReactNode | Lead action glyph, rendered at 24px (e.g. a plus for "create"). | |
children | react.ReactNode | Optional label. Present → an extended pill (icon + label, gap 8); omit →
a circular icon-only FAB (then provide an aria-label). | |
iconFlip | boolean | Flip the icon horizontally in RTL (for directional glyphs). | |
asChild | boolean | Render as the single child element instead of a <button>, to compose with
router links: <FloatingButton asChild icon={…}><a href="…" /></FloatingButton>.
type and native disabled are dropped; disabled then relies on
aria-disabled + tabIndex={-1} (consumer must still gate the action). |
Accessibility
The icon is decorative, so an icon-only FloatingButton must carry an aria-label that names the action. The extended pill uses its visible children as the accessible name. The disabled state is exposed through aria-disabled so the control stays discoverable.
Because the button floats, check that it does not overlap focusable content and that its contrast holds on the surface behind it.