Button

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

Installation

Add the button component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/button.json

Usage

tsx

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

<Button>Button</Button>

Examples

Variants

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

<div className="flex flex-wrap gap-2">
  <Button>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>

Sizes

import { SettingsIcon } from "lucide-react"

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

<div className="flex flex-wrap items-center gap-2">
  <Button size="sm">Small</Button>
  <Button>Default</Button>
  <Button size="lg">Large</Button>
  <Button size="icon" aria-label="Settings">
    <SettingsIcon />
  </Button>
</div>