> ## Documentation Index
> Fetch the complete documentation index at: https://juo.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Button

> Button with variants, sizes, icons, and async handler support.

<Frame>
  <iframe src="data:text/html;base64,PCEtLSBUaGlzIGZpbGUgaXMgYXV0by1nZW5lcmF0ZWQgYnkgc2NyaXB0cy9nZW5lcmF0ZS1kb2NzLnRzLiBEbyBub3QgZWRpdCBtYW51YWxseS4gLS0+CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9IlVURi04Ij4KICA8bWV0YSBuYW1lPSJ2aWV3cG9ydCIgY29udGVudD0id2lkdGg9ZGV2aWNlLXdpZHRoLCBpbml0aWFsLXNjYWxlPTEuMCI+CiAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vQGp1by9jdXN0b21lci11aS9kaXN0L3dlYi1jb21wb25lbnRzLmlpZmUuanMiPjwvc2NyaXB0PgogIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9pbnRlci11aUAzLjE5LjMvaW50ZXIubWluLmNzcyIgLz4KICA8c3R5bGU+CiAgICAqIHsgYm94LXNpemluZzogYm9yZGVyLWJveDsgbWFyZ2luOiAwOyBwYWRkaW5nOiAwOyB9CiAgICBodG1sLCBib2R5IHsgaGVpZ2h0OiAxMDAlOyB9CiAgICBib2R5IHsgZGlzcGxheTogZmxleDsgYWxpZ24taXRlbXM6IGNlbnRlcjsganVzdGlmeS1jb250ZW50OiBjZW50ZXI7IGZvbnQtZmFtaWx5OiAiSW50ZXIgdmFyIiwgc2Fucy1zZXJpZjsgLXdlYmtpdC1mb250LXNtb290aGluZzogYW50aWFsaWFzZWQ7IC1tb3otb3N4LWZvbnQtc21vb3RoaW5nOiBncmF5c2NhbGU7IH0KICA8L3N0eWxlPgo8L2hlYWQ+Cjxib2R5Pgo8anVvLWJ1dHRvbiB2YXJpYW50PSJzb2xpZCIgc2l6ZT0ibWQiPkJ1dHRvbjwvanVvLWJ1dHRvbj4KPC9ib2R5Pgo8L2h0bWw+Cg==" style={{ width: "100%", height: "120px", border: "none" }} />
</Frame>

<Accordion title="Example code">
  ```html theme={null}
  <juo-button variant="solid" size="md">Button</juo-button>
  ```
</Accordion>

Button with variants, sizes, icons, and async handler support. When a `handler`
is provided, the button renders an inline loading state while the promise settles, then a
success or error glyph.

## Usage

```html theme={null}
<juo-button variant="solid" size="md">Button</juo-button>
```

## Reference

### Parameters

<ParamField path="disabled" type="attr · prop · boolean | Record<string, boolean>" default="false">
  Complex values (`Record<string, boolean>`) must be assigned via the `disabled` JS property instead.
</ParamField>

<ParamField path="handler" type="prop · (() => unknown)" />

<ParamField path="type" type="attr · reset | submit | button | link" default="button" />

<ParamField path="variant" type="attr · solid | link | outline | ghost" default="solid" />

<ParamField path="size" type="attr · md | sm | lg | xl" default="md" />

<ParamField path="icon" type="attr · prop · string | Component">
  Complex values (`Component`) must be assigned via the `icon` JS property instead.
</ParamField>

<ParamField path="icon-position" type="attr · start | end" default="start" />

### Events

The element dispatches native [`CustomEvent`](https://developer.mozilla.org/docs/Web/API/CustomEvent)s; the payload is in `event.detail`.

<ResponseField name="click" type="CustomEvent">
  `event.detail`: `[event: MouseEvent]`
</ResponseField>

### Slots

<ResponseField name="default" type="slot" />
