Button

Отображает кнопку или компонент, похожий на кнопку

Превью

Установка

npx shadcn@latest add @gooseui/button

Или напрямую:

npx shadcn@latest add https://gooseui.pro/r/button.json

Использование

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

export function MyComponent() {
  return <Button>Click me</Button>
}

Варианты

Default

<Button>Button</Button>

Secondary

<Button variant="secondary">Secondary</Button>

Destructive

<Button variant="destructive">Destructive</Button>

Outline

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

Ghost

<Button variant="ghost">Ghost</Button>

Link

<Button variant="link">Link</Button>

Размеры

<Button size="sm">Small</Button>
<Button size="default">Default</Button>
<Button size="lg">Large</Button>
<Button size="icon">...</Button>

Props

PropTypeDefault
variant"default" | "destructive" | "outline" | "secondary" | "ghost" | "link""default"
size"default" | "sm" | "lg" | "icon""default"
asChildbooleanfalse