Button

registry/examples/button-demo.tsx

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

export default function ButtonDemo() {

Installation


pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/button.json

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

<Button variant="outline">Button</Button>

registry/examples/button-secondary.tsx

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

export default function ButtonSecondary() {

registry/examples/button-destructive.tsx

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

export default function ButtonDestructive() {

registry/examples/button-outline.tsx

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

export default function ButtonOutline() {

registry/examples/button-ghost.tsx

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

export default function ButtonGhost() {

registry/examples/button-link.tsx

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

export default function ButtonLink() {

registry/examples/button-icon.tsx

import { ChevronRight } from "lucide-react"

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

registry/examples/button-with-icon.tsx

import { Mail } from "lucide-react"

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

registry/examples/button-loading.tsx

import { Loader2 } from "lucide-react"

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

Prop	Type	Default
`variant`	`"default" \| "outline" \| "ghost" \| "destructive" \| "secondary" \| "link"`	`"default"`
`size`	`"default" \| "sm" \| "lg" \| "icon" \| "icon-sm" \| "icon-lg"`	`"default"`
`asChild`	`boolean`	`false`