# Fab

**When to use:** Floating action button — primary screen action (create, add, compose), optionally with a speed-dial sub-menu.

**Keywords:** compose button

**Import:** `import { Fab } from '@ahrowe/ui'`

```tsx
import { Fab } from '@ahrowe/ui';
import { faPlus, faPen, faCamera } from '@fortawesome/free-solid-svg-icons';

// Simple FAB
<Fab onClick={handleCreate}>
  <FontAwesomeIcon icon={faPlus} />
</Fab>

// Speed dial with sub-menu
<Fab
  menuEntries={[
    { id: 'write', icon: faPen, label: 'Write' },
    { id: 'photo', icon: faCamera, label: 'Photo' },
  ]}
  onMenuEntryClicked={(id) => handleAction(id)}
/>

// Mini size
<Fab size="mini" onClick={handleAction}>
  <FontAwesomeIcon icon={faPlus} />
</Fab>
```

**Key props:**

| Prop | Type | Description |
|------|------|-------------|
| `size` | `'default' \| 'mini'` | Button size |
| `menuEntries` | `FabMenuEntry[]` | `{ id, icon, label? }` — enables speed dial |
| `onMenuEntryClicked` | `(id: string) => void` | Sub-menu entry handler |
| `closeMenuOnEntryClicked` | `boolean` | Close the menu after an entry is picked (default `true`) |
| `onClick` | `() => void` | Simple click handler (no speed dial) |
| `children` | `ReactNode` | FAB icon content |

## Sizing

| Variable | Falls back to |
|----------|---------------|
| `--fab-size` | `56px` |
| `--fab-mini-size` | `40px` |
| `--fab-icon-size` | `18px` |

**Deliberately not tied to `--default-font-size`**, unlike Button. A FAB is a touch target holding an icon: its size is set by fingers rather than by reading comfort, it contains no text to stay in proportion with, and it floats over the page — so growing it with the text scale would only occlude more content. Couple them yourself if that is what you want:

```css
--fab-size: calc(var(--default-font-size) * 3.5);
```

`--fab-icon-size` is independent of `--fab-size`, so enlarging the button does not enlarge the glyph; set both. It applies to the speed-dial entries as well as the main button.

**Slots:** `root` `backdrop` `button` `icon` `menu` `menuEntry` `menuEntryLabel`