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

# Chip

> Compact label chip with an optional dismiss button.

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

<Accordion title="Example code">
  ```html theme={null}
  <juo-chip label="SAVE10">Chip</juo-chip>
  ```
</Accordion>

Compact label chip with an optional dismiss button. Supports a loading spinner (rendered in place of
the close icon while a removal is pending) and a disabled state.

## Usage

```html theme={null}
<juo-chip label="SAVE10">Chip</juo-chip>
```

## Reference

### Parameters

<ParamField path="label" type="attr · string" required />

<ParamField path="closable" type="attr · boolean" default="false" />

<ParamField path="loading" type="attr · boolean" default="false" />

<ParamField path="disabled" type="attr · boolean" default="false" />

<ParamField path="close-aria-label" type="attr · string" />

### Events

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

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