Button
A button component with multiple variants and sizes for triggering actions
A versatile button component built on Radix UI primitives with support for multiple variants, sizes, and the ability to render as a child component.
Installation
npx shadcn@latest add https://nteract-elements.vercel.app/r/button.jsonInstall the dependencies:
npm install @radix-ui/react-slot class-variance-authorityCopy from the nteract/elements registry.
Usage
import { Button } from "@/registry/primitives/button"
export function Example() {
return <Button>Click me</Button>
}Variants
The button supports several visual variants:
Default
<Button>Default Button</Button>Secondary
<Button variant="secondary">Secondary Button</Button>Outline
<Button variant="outline">Outline Button</Button>Ghost
<Button variant="ghost">Ghost Button</Button>Destructive
<Button variant="destructive">Destructive Button</Button>Link
<Button variant="link">Link Button</Button>Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>Icon Sizes
<Button size="icon-xs"><PlusIcon /></Button>
<Button size="icon-sm"><PlusIcon /></Button>
<Button size="icon"><PlusIcon /></Button>
<Button size="icon-lg"><PlusIcon /></Button>With Icons
<Button>
<PlusIcon />
Add Cell
</Button>
<Button variant="outline">
<PlayIcon />
Run
</Button>Disabled State
<Button disabled>Disabled</Button>
<Button variant="outline" disabled>Disabled Outline</Button>As Child
Use the asChild prop to render the button as a different element, like a link:
import Link from "next/link"
<Button asChild>
<Link href="/docs">Documentation</Link>
</Button>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "default" | Visual style variant |
size | "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | "default" | Button size |
asChild | boolean | false | Render as child element using Radix Slot |
className | string | — | Additional CSS classes |
disabled | boolean | false | Disable the button |
...props | ButtonHTMLAttributes | — | All standard button attributes |