Save Button

Pro

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.

Preview

Installation

npx @lumioui/cli add pro/save-button

Usage

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

Also exported: SAVE_HOLD, formatSaveCount, SaveTally, SaveGhost.

Examples

Add to collection

Saving a mountain lodge in a travel app, teal.

Save with count

The action row under a recipe, orange.

Heart on photo

A fashion browse grid, pink.

Toolbar bookmark

A long-read article with its action toolbar, in ink.

API reference

SaveTally

Prop Type Default
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 Default
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.

 SAVE_HOLD

SaveButton

Prop Type Default
saved boolean

Saved state (controlled).

 —
defaultSaved boolean false
onSavedChange (saved: boolean) => void —
icon "heart" | "bookmark"

Glyph. Default "bookmark".

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

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

 false
label string

Pill copy. Defaults "Save" / "Saved".

 "Save"
savedLabel string "Saved"
size "sm" | "md" | "lg" "md"
activeTone "primary" | "destructive" | "foreground"

Filled glyph colour. "primary" follows the Accent; "destructive" is the classic red heart. Default "primary".

 "primary"
idleTone "foreground" | "mutedForeground"

Glyph colour when not saved (e.g. "foreground" on a white disc). Default "foreground".

 "foreground"
className string —