Button

A versatile button component that supports multiple variants, sizes, and states.

Usage

Basic Examples

Variants

  <Button variant="primary" label="Primary" />
  <Button variant="secondary" label="Secondary" />
  <Button variant="outline" label="Outline" />
  <Button variant="ghost" label="Ghost" />
  <Button variant="link" label="link" />

Sizes

  <Button size="sm" label="small" />
  <Button size="md" label="medium"/>
  <Button size="lg" label="large" />

States

  <Button variant="secondary" label="Disabled" disabled />
  <Button variant="outline" label="Loading" loading />

API Reference

Props

Prop	Type	Default	Description
variant	'default' \| 'primary' \| 'secondary' \| 'destructive'	'default'	The visual style variant
size	'small' \| 'medium' \| 'large'	'medium'	The size of the button
disabled	boolean	false	Whether the button is disabled
loading	boolean	false	Whether to show a loading state
type	'button' \| 'submit' \| 'reset'	'button'	The HTML button type

Events

Event	Detail	Description
click	MouseEvent	Fired when the button is clicked

Slots

Slot	Description
default	The button content