Bookmark

# Save Button > A bookmark button that files into collections. Tap to save to the last one, then change it or make a new one from the strip. Source: https://kokonutui.com/docs/buttons/save-button ## Installation ```bash npx shadcn@latest add @kokonutui/save-button ``` ## Source ```tsx "use client"; /** * @author: @dorianbaffier * @description: Save Button * @version: 1.0.0 * @date: 2026-10-21 * @license: MIT * @website: https://kokonutui.com * @github: https://github.com/kokonut-labs/kokonutui */ import { Check, Plus } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { type FormEvent, useEffect, useId, useLayoutEffect, useRef, useState, } from "react"; import { cn } from "@/lib/utils"; const EASE_OUT = [0.23, 1, 0.32, 1] as const; /** How long the "Saved to" strip stays up when left alone. */ const STRIP_FOR = 4000; export interface SaveCollection { id: string; name: string; /** Items already in it, before this one. */ count: number; /** Tailwind background class for its swatch. */ color: string; } export interface SaveButtonProps { collections?: SaveCollection[]; /** Where a tap saves to, by id. Defaults to the first collection. */ defaultCollection?: string; defaultSaved?: boolean; onSave?: (collectionId: string) => void; onMove?: (collectionId: string) => void; onRemove?: () => void; className?: string; } const DEFAULT_COLLECTIONS: SaveCollection[] = [ { id: "weekend", name: "Weekend trips", count: 12, color: "bg-orange-400" }, { id: "tokyo", name: "Tokyo 2027", count: 31, color: "bg-sky-400" }, { id: "food", name: "Places to eat", count: 48, color: "bg-emerald-400" }, { id: "someday", name: "Someday", count: 7, color: "bg-violet-400" }, ]; const SWATCHES = [ "bg-rose-400", "bg-amber-300", "bg-teal-400", "bg-indigo-400", ]; type View = "closed" | "saved" | "picking" | "removed"; // The panel sits under AnimatePresence, so it's found by query, not ref. const findPanel = (root: HTMLElement | null) => root?.querySelector("[data-save-panel]") ?? null; const focusInPanel = (root: HTMLElement | null) => Boolean(findPanel(root)?.contains(document.activeElement)); // Whatever closes or swaps the panel's content would drop focus on , // so it goes back to the button first. const returnFocus = (root: HTMLElement | null, button: HTMLElement | null) => { if (focusInPanel(root)) { button?.focus(); } }; /** A bookmark whose ink drops in from the top like a ribbon when saved. */ function Ribbon({ saved, reduceMotion, }: { saved: boolean; reduceMotion: boolean; }) { const clip = useId(); let ribbonTransition: object = { duration: 0.18, ease: EASE_OUT }; if (reduceMotion) { ribbonTransition = { duration: 0 }; } else if (saved) { ribbonTransition = { type: "spring", stiffness: 520, damping: 24 }; } return ( ); } export default function SaveButton({ collections: initialCollections = DEFAULT_COLLECTIONS, defaultCollection, defaultSaved = false, onSave, onMove, onRemove, className, }: SaveButtonProps) { const [collections, setCollections] = useState(initialCollections); const [savedTo, setSavedTo] = useState( defaultSaved ? (defaultCollection ?? initialCollections[0]?.id ?? null) : null ); const [lastUsed, setLastUsed] = useState( defaultCollection ?? initialCollections[0]?.id ?? "" ); const [view, setView] = useState("closed"); const [draft, setDraft] = useState(""); const [moved, setMoved] = useState(false); const reduceMotion = Boolean(useReducedMotion()); const rootRef = useRef(null); const buttonRef = useRef(null); const hoverRef = useRef(false); const timerRef = useRef>(undefined); const contentRef = useRef(null); const isOpen = view !== "closed"; const [contentHeight, setContentHeight] = useState(); // The strip grows into the picker and back by its measured height. useLayoutEffect(() => { const content = contentRef.current; if (!(isOpen && content)) { setContentHeight(undefined); return; } const observer = new ResizeObserver(() => setContentHeight(content.offsetHeight) ); observer.observe(content); return () => observer.disconnect(); }, [isOpen]); const saved = savedTo !== null; const current = collections.find((c) => c.id === savedTo); // The strip closes on its own unless it is being read or used. const schedule = (ms = STRIP_FOR) => { clearTimeout(timerRef.current); timerRef.current = setTimeout(() => { if (!(hoverRef.current || focusInPanel(rootRef.current))) { setView((v) => (v === "picking" ? v : "closed")); } }, ms); }; useEffect(() => () => clearTimeout(timerRef.current), []); useEffect(() => { if (view === "closed") { return; } const onPointer = (event: PointerEvent) => { if (!rootRef.current?.contains(event.target as Node)) { setView("closed"); } }; const onKey = (event: KeyboardEvent) => { if (event.key === "Escape") { returnFocus(rootRef.current, buttonRef.current); setView("closed"); } }; document.addEventListener("pointerdown", onPointer); document.addEventListener("keydown", onKey); return () => { document.removeEventListener("pointerdown", onPointer); document.removeEventListener("keydown", onKey); }; }, [view]); // Opening the picker moves focus onto the collection it's saved in. useEffect(() => { if (view === "picking") { findPanel(rootRef.current) ?.querySelector('[aria-current="true"]') ?.focus(); } }, [view]); const toggle = () => { if (saved) { setSavedTo(null); setView("removed"); onRemove?.(); schedule(1600); return; } setSavedTo(lastUsed); setMoved(false); setView("saved"); onSave?.(lastUsed); schedule(); }; const moveTo = (id: string) => { returnFocus(rootRef.current, buttonRef.current); setSavedTo(id); setLastUsed(id); setMoved(id !== savedTo); setView("saved"); if (id !== savedTo) { onMove?.(id); } schedule(); }; const create = (event: FormEvent) => { event.preventDefault(); const name = draft.trim(); if (!name) { return; } const id = `${name.toLowerCase().replace(/\s+/g, "-")}-${collections.length}`; const color = SWATCHES[collections.length % SWATCHES.length]; setCollections((list) => [...list, { id, name, count: 0, color }]); setDraft(""); moveTo(id); }; const countFor = (collection: SaveCollection) => collection.count + (savedTo === collection.id ? 1 : 0); const swap = reduceMotion ? { duration: 0 } : { duration: 0.2, ease: EASE_OUT }; return (

{ hoverRef.current = true; }} onPointerLeave={() => { hoverRef.current = false; if (view === "saved" || view === "removed") { schedule(1800); } }} ref={rootRef} > {view !== "closed" && (

{view === "picking" ? ( ) : (

{view === "removed" || !current ? ( Removed from saved ) : ( <> {moved ? "Moved to " : "Saved to "} {current.name} )}

)}

); } function Picker({ collections, savedTo, countFor, moveTo, draft, setDraft, create, }: { collections: SaveCollection[]; savedTo: string | null; countFor: (collection: SaveCollection) => number; moveTo: (id: string) => void; draft: string; setDraft: (value: string) => void; create: (event: FormEvent) => void; }) { return (

Save to

); } ```