# Icon Button

> A button with only an icon.

## Examples

### Basic

```vue
<template>
  <div class="demo-row">
    <UiIconButton label="Settings"><Icon name="settings" /></UiIconButton>
    <UiIconButton label="Add" variant="secondary"><Icon name="plus" /></UiIconButton>
    <UiIconButton label="Delete" variant="danger" shape="round"><Icon name="trash" /></UiIconButton>
  </div>
</template>
```

## API

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"primary" \| "secondary" \| "solid" \| "ghost" \| "danger" \| "link"` | `"ghost"` | Style hook, exposed as `data-button-variant`. |
| `size` | `"small" \| "medium" \| "large"` | — | Size hook, exposed as `data-button-size`. |
| `fullWidth` | `boolean` | — | Layout hook, exposed as `data-button-full-width`. |
| `loading` | `boolean` | — | Busy state: blocks clicks and sets `aria-busy`, but stays focusable. |
| `disabled` | `boolean` | — | Disables the button. A disabled link loses its `href` and leaves the tab order. |
| `type` | `"button" \| "submit" \| "reset"` | — | Native button type. |
| `href` | `string` | — | Renders an `<a>` to this URL instead of a `<button>`. |
| `to` | `string \| Record<string, unknown>` | — | Route for the router link given to `createUi({ link })`, rendering it instead of a `<button>`. |
| `target` | `"_blank" \| "_self" \| "_parent" \| "_top"` | — | Link target. |
| `label` (required) | `string` | — | Accessible name; icon-only buttons have no visible text to supply one. |
| `shape` | `"round" \| "square"` | — | Shape hook, exposed as `data-button-shape`. |

| Slot | Props | Description |
| --- | --- | --- |
| `default` | — | The icon. |
| `spinner` | — | Shown while `loading`, in place of the icon. |

## Styling

- Parts (`[data-part="…"]`): 
- State attributes: `data-button-shape`, `data-button-icon-only`

## Accessibility

- `label` is required: with no visible text, it's the button's only name.