# FloatingActionButton

> The primary action of a screen, floating above content in a corner.

Category: Actions · Status: stable · Package: @bindshq/stance-react@0.1.1 · Docs: https://stanceui.com/components/floating-action-button

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.

## Import

```tsx
import { FloatingActionButton, Icon } from '@bindshq/stance-react';
```

Styles are imported once per app: `@bindshq/stance-tokens/css` and `@bindshq/stance-react/styles.css`.

## Examples

### Icon only

```tsx
import { FloatingActionButton, Icon } from '@bindshq/stance-react';

export function Basic() {
  return (
    <FloatingActionButton position="static" icon={<Icon name="plus" />} label="New signature" />
  );
}
```

### Extended with label

```tsx
import { FloatingActionButton, Icon } from '@bindshq/stance-react';

export function Extended() {
  return (
    <FloatingActionButton
      position="static"
      extended
      icon={<Icon name="pen-nib" />}
      label="Create template"
    />
  );
}
```

### Sizes

```tsx
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

| Component | Prop | Type | Default | Description |
| --- | --- | --- | --- | --- |
| FloatingActionButton | `icon` (required) | `ReactNode` | None | The icon. |
| FloatingActionButton | `label` (required) | `string` | None | Accessible name; visible when extended. |
| FloatingActionButton | `extended` | `boolean` | `false` | Show the label beside the icon. |
| FloatingActionButton | `position` | `'bottom-right' \| 'bottom-left' \| 'bottom-center' \| 'static'` | `'bottom-right'` | Fixed viewport corner, or static to place it yourself. |
| FloatingActionButton | `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. |

## 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.

## Related

- https://stanceui.com/components/button
- https://stanceui.com/components/icon-button