Get Started
Components
- Accordion
- Alert
- Alert Dialog
- Aspect Ratio
- Avatar
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Chart
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Data Table
- Date Picker
- Dialog
- Drawer
- Dropdown Menu
- React Hook Form
- Hover Card
- Input
- Input OTP
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toast
- Toggle
- Toggle Group
- Tooltip
- Typography
Installation
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button>Button</Button>
</div>
)
}
Installation
pnpm dlx shadcn@latest add button
Usage
import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>Link
You can use the asChild prop to make another component look like a button. Here's an example of a link that looks like a button.
import { Link } from "next/link"
import { Button } from "@/components/ui/button"
export function LinkAsButton() {
return (
<Button asChild>
<Link href="/login">Login</Link>
</Button>
)
}Examples
Default
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="flex flex-wrap items-center gap-2 md:flex-row">
<Button>Button</Button>
</div>
)
}
Secondary
import { Button } from "@/components/ui/button"
export function ButtonSecondary() {
return <Button variant="secondary">Secondary</Button>
}
Destructive
import { Button } from "@/components/ui/button"
export function ButtonDestructive() {
return <Button variant="destructive">Destructive</Button>
}
Outline
import { Button } from "@/components/ui/button"
export function ButtonOutline() {
return <Button variant="outline">Outline</Button>
}
Ghost
import { Button } from "@/components/ui/button"
export function ButtonGhost() {
return <Button variant="ghost">Ghost</Button>
}
Link
import { Button } from "@/components/ui/button"
export function ButtonLink() {
return <Button variant="link">Link</Button>
}
Icon
import { ChevronRightIcon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonIcon() {
return (
<Button variant="secondary" size="icon" className="size-8">
<ChevronRightIcon />
</Button>
)
}
With Icon
import { IconGitBranch } from "@tabler/icons-react"
import { Button } from "@/components/ui/button"
export function ButtonWithIcon() {
return (
<Button variant="outline" size="sm">
<IconGitBranch /> New Branch
</Button>
)
}
Loading
import { Loader2Icon } from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonLoading() {
return (
<Button size="sm" disabled>
<Loader2Icon className="animate-spin" />
Please wait
</Button>
)
}
Deploy your shadcn/ui app on Vercel
Trusted by OpenAI, Sonos, Chick-fil-A, and more.
Vercel provides tools and infrastructure to deploy apps and features at scale.
Deploy to Vercel