Components Actions
FloatingActionButton
StableThe primary action of a screen, floating above content in a corner.
Use FloatingActionButton on touch-first or content-heavy screens where the main action must stay reachable while scrolling, such as creating a new signature from a long list. Use at most one per view. On desktop dashboards a regular primary Button in the page header is usually clearer.
Overview
import { FloatingActionButton, Icon } from '@bindshq/stance-react';
export function Basic() {
return (
<FloatingActionButton position="static" icon={<Icon name="plus" />} label="New signature" />
);
}Light, dark and high contrast
Every Stance component is designed and tested in all three appearance modes.
Import
import { FloatingActionButton, Icon } from '@bindshq/stance-react';Platforms
FloatingActionButton has native counterparts. They share Stance tokens and intent, and use each platform’s own controls and conventions. The live previews on this page are the web implementation.
import { FloatingActionButton, Icon } from '@bindshq/stance-react';Examples
import { FloatingActionButton, Icon } from '@bindshq/stance-react';
export function Extended() {
return (
<FloatingActionButton
position="static"
extended
icon={<Icon name="pen-nib" />}
label="Create template"
/>
);
}import { FloatingActionButton, Icon } from '@bindshq/stance-react';
export function Sizes() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<FloatingActionButton
position="static"
size="md"
icon={<Icon name="plus" />}
label="Add user"
/>
<FloatingActionButton
position="static"
size="lg"
icon={<Icon name="plus" />}
label="Add user"
/>
</div>
);
}API reference
| Prop | Type | Default | Description |
|---|---|---|---|
icon* required | ReactNode | None | The icon. |
label* required | string | None | Accessible name; visible when extended. |
extended | boolean | false | Show the label beside the icon. |
position | 'bottom-right' | 'bottom-left' | 'bottom-center' | 'static' | 'bottom-right' | Fixed viewport corner, or static to place it yourself. |
size | 'md' | 'lg' | 'lg' | 44 or 56px. |
Accessibility
- Icon-only FABs use the label as aria-label and title.
- Fixed positioning respects device safe areas so the button is never hidden by the home indicator.
- Place the FAB late in the DOM so its tab position matches its visual prominence without jumping ahead of content.
Keyboard
| Keys | Action |
|---|---|
| Enter Space | Activates the action. |
Usage guidelines
Do
- Use for a single, positive, frequent action (create, compose).
Don’t
- Use for destructive or secondary actions.
- Show more than one FAB on a screen.