Component

Button

A compact action primitive with variants, sizes, previews, source, commands, and props.

Preview

PreviewSource

button-demo

button-demo.tsx

import { Button } from "../ui/button";

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button>Install package</Button>
      <Button variant="secondary">View source</Button>
      <Button variant="quiet">Cancel</Button>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add http://localhost:3000/r/button.json

Source

button.tsx

import * as React from "react";

const variants = {
  default: "bg-primary text-primary-foreground hover:bg-primary/90 focus-visible:outline-ring",
  secondary:
    "bg-secondary text-secondary-foreground hover:bg-secondary/80 focus-visible:outline-ring",
  quiet:
    "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-ring",
} as const;

const sizes = {
  sm: "h-8 px-3 text-xs",
  md: "h-10 px-4 text-sm",
  lg: "h-11 px-5 text-base",
} as const;

export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  variant?: keyof typeof variants;
  size?: keyof typeof sizes;
};

export function Button({
  className,
  variant = "default",
  size = "md",
  type = "button",
  ...props
}: ButtonProps) {
  return (
    <button
      type={type}
      className={[
        "inline-flex items-center justify-center gap-2 rounded-md font-medium outline-none transition-colors active:scale-[0.96] disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-2 focus-visible:outline-offset-2",
        variants[variant],
        sizes[size],
        className,
      ]
        .filter(Boolean)
        .join(" ")}
      {...props}
    />
  );
}

Props

Prop	Type	Default	Description
`variant`	`"default" \| "secondary" \| "quiet"`	`"default"`	Controls the visual emphasis of the button.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Changes height, padding, and text size.
`className`	`string`	-	Adds custom classes to the rendered button.