Button

Triggers an action. Springy press feedback, a loading state that grows in place, and seven variants.

Playground

Tweak the props, the preview and the code follow.

Props

variant

size

label

icon

disabled

import { ArrowRight } from "lucide-react"
import { Button } from "@/components/ui/button"

<Button>
  Continue
  <ArrowRight />
</Button>

npx @plumsydev/plum-ui add button

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

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

The spinner animates its width so the label never jumps.

Render any element — like a Next.js Link — with button styles.

Extends the native button element.

Prop	Type	Default
`variant` Visual style.	`"default" \| "brand" \| "secondary" \| "outline" \| "ghost" \| "destructive" \| "link"`	`"default"`
`size` Height and padding.	`"xs" \| "sm" \| "default" \| "lg" \| "xl" \| "icon" \| "icon-sm" \| "icon-xs"`	`"default"`
`loading` Shows an inline spinner and sets aria-busy.	`boolean`	`false`
`asChild` Merge props onto the child element instead of rendering a button.	`boolean`	`false`