Components / Base

Button

Extends the shadcn/ui Button with a loading prop that shows a spinner and disables interaction while preserving the button label.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/button/registry.json

Usage

tsx

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

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

Examples

Variants

Preview

tsx

<Button variant="default">Default</Button>
<Button variant="outline">Outline</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="destructive">Destructive</Button>
<Button variant="link">Link</Button>

Loading state

Preview

tsx

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

export function Example() {
  return <Button loading>Saving...</Button>
}

Sizes

Preview

Disabled

Preview

Props

All standard HTML button attributes are also accepted via ...props.

Prop	Type	Default	Description
variant	"default" \| "outline" \| "secondary" \| "ghost" \| "destructive" \| "link"	"default"	Controls the visual style of the button.
size	"default" \| "xs" \| "sm" \| "lg" \| "icon" \| "icon-xs" \| "icon-sm" \| "icon-lg"	"default"	Controls the size of the button.
loading	boolean	false	When true, shows a spinner and disables the button. The button label remains visible alongside the spinner.
disabled	boolean	false	Disables the button. Also set automatically when loading is true.