Button

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

<.button>Button</.button>

Examples

Variants

The six built-in variants.

<div class="flex flex-wrap gap-2">
  <.button variant="default">Default</.button>
  <.button variant="secondary">Secondary</.button>
  <.button variant="destructive">Destructive</.button>
  <.button variant="outline">Outline</.button>
  <.button variant="ghost">Ghost</.button>
  <.button variant="link">Link</.button>
</div>

Show code

Sizes

Four sizes. The icon size takes an icon child instead of text.

<div class="flex flex-wrap items-center gap-2">
  <.button size="sm">Small</.button>
  <.button size="default">Default</.button>
  <.button size="lg">Large</.button>
  <.button size="icon"><Phosphor.gear /></.button>
</div>

Props

Name	Type	Default	Values
class	:string
rest	:global
size	:string	"default"	default \| xs \| sm \| lg \| icon \| icon-xs \| icon-sm \| icon-lg
type	:string	"button"
variant	:string	"default"	default \| secondary \| destructive \| outline \| ghost \| link
inner_block (slot)	:slot