StacklyUI
Components/Button

Button

Displays a button or a component that looks like a button.

01

Preview & playground

Edit the code — the preview updates live. Try changing props, text, or classes.

playground.tsx
function Demo() {
  return (
    <div className="flex flex-wrap items-center justify-center gap-3">
      <Button>Primary</Button>
      <Button variant="secondary">Secondary</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="ghost">Ghost</Button>
      <Button variant="destructive">Delete</Button>
    </div>
  )
}
render(<Demo />)
02

Examples

Common variations — edit any of them live.

Sizes

sm, md (default), and lg.

playground.tsx
render(
  <div className="flex items-center gap-3">
    <Button size="sm">Small</Button>
    <Button size="md">Medium</Button>
    <Button size="lg">Large</Button>
  </div>
)

With icon

Icons auto-size to 1rem inside a button.

playground.tsx
render(
  <div className="flex items-center gap-3">
    <Button>
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M12 5v14"/></svg>
      New project
    </Button>
    <Button variant="outline">
      Continue
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="m9 18 6-6-6-6"/></svg>
    </Button>
  </div>
)

Loading

Compose with Spinner and disable while pending.

playground.tsx
render(
  <Button disabled>
    <Spinner size={16} />
    Saving…
  </Button>
)

Icon only

playground.tsx
render(
  <Button size="icon" variant="secondary" aria-label="Like">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.7l-1-1.1a5.5 5.5 0 0 0-7.8 7.8l1 1L12 21l7.8-7.6 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>
  </Button>
)
03

Installation

Copy the source into your project with the registry CLI:

$pnpm dlx shadcn@latest add @stacklyui/button

Or install the package and import it:

$pnpm add @stacklyui/ui motion
04

Usage

Choose a variant (primary, secondary, outline, ghost, destructive, link) and a size (sm, md, lg, icon). Pass asChild to render a link while keeping the button styling.