Github

Button

Displays a button or a component that looks like a button.

import { Button } from "@/components/ui/button";

export function ButtonDemo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="default">Default</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Destructive</Button>
      <Button variant="link">Link</Button>
    </div>
  );
}

Installation

pnpm dlx shadcn@latest add https://shadcn-registry-docs-template.pages.dev/r/button.json

Usage

import { Button } from "@/components/ui/button"
<Button>Click me</Button>

Reference

Props

The Button component accepts all props from @base-ui-components/react Button plus the following:

PropTypeDefault
variant"default" | "secondary" | "outline" | "ghost" | "destructive" | "link"
"default"
size"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg"
"default"