DesignLayer
Bookmark Save Toggle
Back to components
What is this?
A white pill save button: a bookmark icon and a label. Press it and the bookmark fills while “Save” rolls up into “Saved”, and it stays saved until pressed again. Swap the labels, then drop it into the corner of an article, recipe, or product card.
Component
Bookmark Save Toggle
A white pill save button: a bookmark icon and a label. Press it and the bookmark fills while “Save” rolls up into “Saved”, and it stays saved until pressed again. Swap the labels, then drop it into the corner of an article, recipe, or product card.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- CSS / Tailwind
- Reduced motion
- Verified
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Finished React · TypeScript · Tailwind CSS · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Lucide
Version 1.0.0