## Bookmark Button (S—094)

A save button whose ribbon fills from the top and dips like it was pressed, with an optional “Saved to” toast line.

- URL: https://sundaeui.dev/components/bookmark-button
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/bookmark-button.json`
- Tags: save, reading-list, bookmark, favourite, toggle, button

Saving fills the ribbon top-down and gives it a small downward dip, as if clipped onto the page. Unsaving drains it.
An optional line under it confirms where it was saved, with an Undo, and fades after a few seconds.

### Usage

```tsx
import { BookmarkButton } from '@/components/sundae/bookmark-button'

<BookmarkButton />
```

### Props

- `saved / defaultSaved` (`boolean`, default `false`): State.
- `collection` (`string`): Name shown in the confirmation.
- `onSavedChange` (`(saved: boolean) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Articles, products, listings, recipes, jobs.

### When not to use

- Multi-collection saving: open a picker instead.

### Accessibility

- A toggle button with aria-pressed and the name "Save" or "Saved".
- The confirmation is a polite status with an Undo button.
- Reduced motion removes the movement and keeps every state change.