Button

A button component with multiple variants, sizes, and loading state.

Installation

bash

npx @smicolon/cli add button

Run init once per project before adding components. See Installation.

Preview

Variants

Sizes

Loading

Props

Prop	Type	Default	Description
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"default"`	The visual style of the button.
`size`	`"default" \| "sm" \| "lg" \| "icon"`	`"default"`	The size of the button.
`loading`	`boolean`	`false`	Shows a loading spinner.
`loadingLabel`	`string`	`"Loading"`	Screen-reader text while loading.
`disabled`	`boolean`	`false`	Disables the button.
`asChild`	`boolean`	`false`	Renders its child element instead.
`onClick`	`(event) => void`	—	Called when the button is pressed.
`className`	`string`	—	Extra classes for the component.

Usage

tsx

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

export function Example() {
  return (
    <Button variant="default" size="default">
      Save changes
    </Button>
  )
}