Preview

Installation

npx sigma-ui@latest add button

Usage

<script setup lang="ts">
import { Button } from '@/components/ui/button';
</script>

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

Render a link or any other element with the button styles through as or asChild:

<template>
  <Button as-child>
    <a href="/login">Login</a>
  </Button>
</template>

Examples

Secondary

Destructive

Outline

Ghost

Link

Icon

Sizes

xs, sm, default, and lg set the height. icon-xs, icon-sm, icon, and icon-lg make a square button.

With Icon

Loading

Set isLoading to disable the button and show a spinner. loadingText replaces the label while loading.

Confirm

ConfirmButton shows a checkmark for confirmDuration milliseconds after a click, to confirm that the action was completed.

As Child

API Reference

Button

Props

Prop	Type	Default
variant Visual style of the button.	"default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null	"default"
size Height and padding preset. icon, icon-xs, icon-sm, and icon-lg make a square button.	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	"default"
isLoading Shows a spinner and disables the button.	boolean	false
loadingText Text that replaces the button content while loading; the content stays visible when empty.	string	""
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"button"

Slots

Slot	Scope
default The content of the component.	-

ConfirmButton

Props

Prop	Type	Default
variant Visual style of the button.	"default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null	"outline"
size Height and padding preset; icon makes a square button.	"default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null	"default"
confirmDuration Milliseconds the checkmark stays visible after a click.	number	1000

Events

Event	Payload
click Emitted on click; clicks while the checkmark is showing are ignored.	[event: MouseEvent]

Slots

Slot	Scope
default The content of the component.	-

Accessibility

Renders a native <button> element by default, so it is focusable and announced as a button. When you render a different element with as or asChild, make sure it keeps button semantics, or use a link for navigation.

Key	Description
Tab	Moves focus to the button.
Enter	Activates the button.
Space	Activates the button.