Button

A button with various variants and sizes

Preview

npm

pnpm

yarn

bun

npx shadcn@latest add @gooseui/button

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

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

<Button>Default</Button>

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

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

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

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

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

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

iOS-style squircle corners using CSS corner-shape: squircle.

border-radius

corner-shape

squircle

<Button squircle>Squircle</Button>
<Button squircle variant="secondary">Secondary</Button>
<Button squircle variant="outline">Outline</Button>

Prop	Type	Default	Description
variant	"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"	"default"	Visual style variant
size	"default" \| "sm" \| "lg" \| "icon"	"default"	Size of the button
asChild	boolean	false	Render as child element
squircle	boolean	false	Apply iOS-style squircle corners (Chrome 139+)