button.tsx from marvkr/better-design
// Source: https://github.com/marvkr/better-design | License: MIT | Copyright 2026 Marvin Kaunda
// Provided via justclaw.it.com; keep this notice with the code.
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
// Notion Button — minimal, near-black primary, very small radius (rounded-sm)
// Matches actual Notion app: dark primary CTA, light secondary/ghost
// Transition: 100ms colors (snappy Notion feel)
// Uses `rounded-sm` (2px) like the Notion clone — ultra-tight radius
const buttonVariants = cva(
[
"relative inline-flex items-center justify-center gap-2 whitespace-nowrap",
"text-sm font-medium",
"rounded-sm transition-colors duration-100",
... (truncated -- full source via MCP)
See the full source, get the GitHub permalink, and search for more like it.
Get a free API key