How do I use Bookmark Save Button in my project?

Copy the BookmarkSaveButton source code from https://opensourceui.in/components/bookmark-save-button, add lib/cn.ts if needed, install clsx tailwind-merge and lucide-react, then import and render the component in your React or Next.js app.

Can I use Bookmark Save Button in a commercial project?

Yes. Opensource UI is MIT licensed. You can use BookmarkSaveButton in personal and commercial projects without UI attribution.

Back to Buttons

Components / Buttons

Bookmark Save Button

Save for later — bookmark icon fills amber and label swaps to Saved. Square-ish control for articles and products.

Preview

Setup

How to use

Free for personal and commercial use. No UI attribution required. Include the MIT copyright notice when copying component source into your project. Read the MIT license.

1
Run in your terminal:
$npm install clsx tailwind-merge lucide-react
2
Copy lib/cn.ts below. Skip if you already have cn().
3
Copy the code below and create components/buttons/bookmark-save-button.tsx in your project.
4
Import and render:
Example
import { BookmarkSaveButton } from "@/components/buttons/bookmark-save-button";
<BookmarkSaveButton label="Save" savedLabel="Saved" />

lib/cn.ts

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

components/buttons/bookmark-save-button.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
"use client";
 
import { forwardRef, useState, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
import { Bookmark } from "lucide-react";
 
export type BookmarkSaveButtonProps = Readonly<
  {
    label?: string;
    savedLabel?: string;
    defaultSaved?: boolean;
  } & ComponentPropsWithoutRef<"button">
>;
 
// Bookmark save — icon fills and label swaps when saved.
export const BookmarkSaveButton = forwardRef<
  HTMLButtonElement,
  BookmarkSaveButtonProps
>(
  (
    {
      className,
      label = "Save",
      savedLabel = "Saved",
      defaultSaved = false,
      onClick,
      ...props
    },
    ref,
  ) => {
    const [saved, setSaved] = useState(defaultSaved);
 
    return (
      <button
        ref={ref}
        type="button"
        aria-pressed={saved}
        data-slot="bookmark-save-button"
        onClick={(event) => {
          setSaved((prev) => !prev);
          onClick?.(event);
        }}
        className={cn(
          "inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg border px-3.5 font-sans text-sm font-medium transition-all duration-200 active:scale-[0.98] select-none",
          saved
            ? "border-amber-200 bg-amber-50 text-amber-800"
            : "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-300",
          className,
        )}
        {...props}
      >
        <Bookmark
          size={16}
          strokeWidth={2}
          className={cn(
            "transition-transform duration-200",
            saved ? "scale-110 fill-amber-500 text-amber-500" : "scale-100",
          )}
        />
        {saved ? savedLabel : label}
      </button>
    );
  },
);
 
BookmarkSaveButton.displayName = "BookmarkSaveButton";

"use client"; import { forwardRef, useState, type ComponentPropsWithoutRef } from "react"; import { cn } from "@/lib/cn"; import { Bookmark } from "lucide-react"; export type BookmarkSaveButtonProps = Readonly< { label?: string; savedLabel?: string; defaultSaved?: boolean; } & ComponentPropsWithoutRef<"button"> >; // Bookmark save — icon fills and label swaps when saved. export const BookmarkSaveButton = forwardRef< HTMLButtonElement, BookmarkSaveButtonProps >( ( { className, label = "Save", savedLabel = "Saved", defaultSaved = false, onClick, ...props }, ref, ) => { const [saved, setSaved] = useState(defaultSaved); return ( <button ref={ref} type="button" aria-pressed={saved} data-slot="bookmark-save-button" onClick={(event) => { setSaved((prev) => !prev); onClick?.(event); }} className={cn( "inline-flex h-10 cursor-pointer items-center gap-2 rounded-lg border px-3.5 font-sans text-sm font-medium transition-all duration-200 active:scale-[0.98] select-none", saved ? "border-amber-200 bg-amber-50 text-amber-800" : "border-neutral-200 bg-white text-neutral-700 hover:border-neutral-300", className, )} {...props} > <Bookmark size={16} strokeWidth={2} className={cn( "transition-transform duration-200", saved ? "scale-110 fill-amber-500 text-amber-500" : "scale-100", )} /> {saved ? savedLabel : label} </button> ); }, ); BookmarkSaveButton.displayName = "BookmarkSaveButton";