ui/button.tsx

better-design · components/notion/components/ui/button.tsx · typescript · MIT
ui

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