Get Started
Components
- Components
- Accordion
- Alert Dialog
- Alert
- Aspect Ratio
- Avatar
- Backgrounds
- Badge
- Breadcrumb
- Button
- Calendar
- Card
- Carousel
- Checkbox
- Collapsible
- Combobox
- Command
- Context Menu
- Dialog
- Diamond
- Drawer
- Dropdown Menu
- Hero
- Hover Card
- Input OTP
- Input
- Kbd
- Label
- Menubar
- Navigation Menu
- Pagination
- Popover
- Progress
- Radio Group
- Resizable
- Scroll-area
- Select
- Separator
- Sheet
- Sidebar
- Skeleton
- Slider
- Sonner
- Switch
- Table
- Tabs
- Textarea
- Toggle Group
- Toggle
- Tooltip
- Typography
import {
DownloadIcon,
EyeIcon,
LinkIcon,
PlayIcon,
SettingsIcon,
TrashIcon,
} from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="grid grid-cols-2 gap-4 md:grid-cols-3">
<Button>
<PlayIcon />
Get Started
</Button>
<Button variant="destructive">
<TrashIcon />
Delete
</Button>
<Button variant="outline">
<DownloadIcon />
Download
</Button>
<Button variant="secondary">
<SettingsIcon />
Settings
</Button>
<Button variant="ghost">
<EyeIcon />
Preview
</Button>
<Button variant="link">
<LinkIcon />
Learn More
</Button>
</div>
)
}
Installation
bunx --bun shadcn@latest add https://ui.brodin.dev/r/button.json
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 {
DownloadIcon,
EyeIcon,
LinkIcon,
PlayIcon,
SettingsIcon,
TrashIcon,
} from "lucide-react"
import { Button } from "@/components/ui/button"
export function ButtonDemo() {
return (
<div className="grid grid-cols-2 gap-4 md:grid-cols-3">
<Button>
<PlayIcon />
Get Started
</Button>
<Button variant="destructive">
<TrashIcon />
Delete
</Button>
<Button variant="outline">
<DownloadIcon />
Download
</Button>
<Button variant="secondary">
<SettingsIcon />
Settings
</Button>
<Button variant="ghost">
<EyeIcon />
Preview
</Button>
<Button variant="link">
<LinkIcon />
Learn More
</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>
)
}