A bookmark that files into collections.
FreeWeb and MobileMotion
Preview
npx shadcn add @fetaui/save-buttonPlayground
Saved
Collections
Disabled
Icons animation
Motion
Installation
Terminal· bash
npx shadcn add @fetaui/save-button
Saved
The first press files into the first collection and opens the panel. Pressing a saved button removes it from all.
Motion
Accessibility
- The button uses aria-pressed and aria-expanded.
- Rows use aria-pressed.
Motion
- The label rolls 14 px on a spring.
- The panel scales from 0.97 with a 6 px rise.
- With reduced motion, the press scale is off and color changes stay. The panel fades.
Responsive behavior
- The panel fits the screen on small widths.
Performance
- The panel mounts only while open. Its outside click and Esc listeners exist only then.
- The label roll and the panel animate transform and opacity.
Note for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Import from @/components/fetaui/save-button.
- Pass collections and read onChange: it fires the ids this item is in, and an empty list means removed.
- State is internal. defaultSelected only seeds it on mount.
- onNewCollection only tells you it was pressed. Build the create flow yourself.
- The default collections and their counts are sample data, so always pass your own.
Related
Bell ButtonComponentA subscribe toggle with a bell that swings on two coupled springs.ToggleComponentA button that stays pressed.Add to Cart ButtonComponentAdd opens into a quantity stepper in place.PopoverComponentAnchored context that stays close to its trigger: a pill, a Soft two part panel and a nub pointing back.Dropdown MenuComponentA list of actions behind a button, with shortcuts, toggles, submenus and a red destructive action at the end.