Matte Bookmark Button

Buttons

About

A toggleable bookmark/save button with a matte dark surface, a ribbon icon that fills in and an animated label swap between "Bookmark" and "Bookmarked". Ported to React from SLtowl's sl-ui-library vanilla HTML/CSS/JS component.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Matte Bookmark Button to your project and fits it to your theme.

Code

How Matte Bookmark Button is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import MatteBookmark from "@/components/ui/matte-bookmark";

export default function MatteBookmarkDemo() {
  const [status, setStatus] = React.useState(
    "Try the button. Your selection stays until you undo it.",
  );

  return (
    <div className="flex min-h-[320px] w-full flex-col items-center justify-center gap-6 bg-[#f5f4f2] p-10">
      <MatteBookmark
        onBookmarkChange={(pressed) =>
          setStatus(
            pressed ? "Bookmarked. Click again to undo." : "Bookmark removed.",
          )
        }
      />
      <p
        className="text-center text-xs leading-relaxed text-[#545454]"
        role="status"
        aria-live="polite"
      >
        {status}
      </p>
    </div>
  );
}