# Save Button

Save, bookmark and favourite toggle as an icon or pill. Saving fills the icon with colour from the inside and changes Save to Saved; unsaving drains it back out.

> Composed · Pro · Actions — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add pro/save-button
```

## Import

```tsx
import { SAVE_HOLD, formatSaveCount, SaveTally, SaveGhost, SaveButton } from "@/components/ui/save-button/save-button";
```

## Variants

- `collection` — Add to collection: `npx @lumioui/cli add pro/save-button-collection`
- `count-pill` — Save with count: `npx @lumioui/cli add pro/save-button-count-pill`
- `heart-photo` — Heart on photo: `npx @lumioui/cli add pro/save-button-heart-photo`
- `toolbar-bookmark` — Toolbar bookmark: `npx @lumioui/cli add pro/save-button-toolbar-bookmark`

## Props

### SaveTally

| Prop | Type | Notes |
| --- | --- | --- |
| `value` | `number` | The number to show; each change swaps in place (+ rises, − falls). |
| `format?` | `(value: number) => string` | Text for the number. Default `${value} saved`. |
| `className?` | `string` | — |

### SaveGhost

| Prop | Type | Notes |
| --- | --- | --- |
| `run` | `number` | Increment to send one ghost. 0 never fires. |
| `source` | `ImageSourcePropType | null` | Thumbnail the ghost carries. |
| `from` | `SaveGhostFrame | null` | Saved object's frame, in the coordinates of the ghost's (relative) parent. |
| `to` | `{ x: number` | Point the ghost dims into (the tally), same coordinates. |
| `y` | `number } | null` | — |
| `onArrive?` | `() => void` | Fires when the ghost reaches the tally — swap the count here. |
| `delay?` | `number` | Wait before leaving. Default SAVE_HOLD. |

### SaveButton

| Prop | Type | Notes |
| --- | --- | --- |
| `saved?` | `boolean` | Saved state (controlled). |
| `defaultSaved?` | `boolean` | — |
| `onSavedChange?` | `(saved: boolean) => void` | — |
| `icon?` | `"heart" | "bookmark"` | Glyph. Default "bookmark". |
| `variant?` | `"icon" | "disc" | "pill"` | "icon" — bare glyph on a 44pt target (toolbars, rows). "disc" — glyph on a card-coloured disc for photo corners. "pill" — glyph + label ("Save" / "Saved") + optional count. Default "icon". |
| `count?` | `number` | Saves by others; the viewer's save is added on top. Shown on pills, or beside the icon when `showCount`. |
| `showCount?` | `boolean` | Show the count beside a bare icon. Default false. |
| `label?` | `string` | Pill copy. Defaults "Save" / "Saved". |
| `savedLabel?` | `string` | — |
| `size?` | `"sm" | "md" | "lg"` | — |
| `activeTone?` | `"primary" | "destructive" | "foreground"` | Filled glyph colour. "primary" follows the Accent; "destructive" is the classic red heart. Default "primary". |
| `idleTone?` | `"foreground" | "mutedForeground"` | Glyph colour when not saved (e.g. "foreground" on a white disc). Default "foreground". |
| `className?` | `string` | — |

## Icons rendered

- `heart` — /icons.html?i=heart
- `bookmark` — /icons.html?i=bookmark

Source: https://lumioui.com/components/save-button