# IconButton

`IconButton` places a decorative thin-stroke icon inside an accessible button target.

## Usage

Load `@dg/ui/styles.css` once in the root layout.

```svelte
<script>
  import { IconButton } from "@dg/ui";
  let open = $state(false);
</script>

<IconButton label="Toggle menu" icon="menu" pressed={open} onclick={() => (open = !open)} />
<IconButton label="Add item" icon="add" shape="round" />
<p>{open ? "Menu requested" : "Menu closed"}</p>
```

## Notes

- Native HTML attributes, DOM callbacks, class and style are forwarded to the button; it owns its type, accessible name, pressed state and tooltip.
- Forwarding uses native attribute types; unknown props are not supported. Pass class as a string.
- Keyboard focus and unavailable appearance use the shared focus tokens and `--disabled-opacity`. Round controls retain local circular geometry.

## Parameters

| Name       | Type                                                                                                     | Default     | Description                                                                             |
| ---------- | -------------------------------------------------------------------------------------------------------- | ----------- | --------------------------------------------------------------------------------------- |
| `label`    | `string`                                                                                                 | `Required`  | Accessible name and tooltip of the icon-only action.                                    |
| `icon`     | `'close' \| 'expand' \| 'collapse' \| 'menu' \| 'download' \| 'add' \| 'previous' \| 'next' \| 'search'` | `"close"`   | Shared thin-stroke drawing.                                                             |
| `disabled` | `boolean`                                                                                                | `false`     | Disable pointer and keyboard activation.                                                |
| `pressed`  | `boolean`                                                                                                | `undefined` | Supply a boolean for a toggle action's aria-pressed state; omit for an ordinary action. |
| `shape`    | `'square' \| 'round'`                                                                                    | `"square"`  | Square target by default; round makes the target and hover surface circular.            |
| `onclick`  | `(event: MouseEvent) => void`                                                                            | `undefined` | Called with the native click event.                                                     |

## Methods

| Name      | Description                                                |
| --------- | ---------------------------------------------------------- |
| `focus()` | Focus the button without scrolling. Access with bind:this. |

## Accessibility

A meaningful label is required; the SVG supplies no accessible name. Set pressed for a toggle action. Disabled buttons leave the tab order. Tab shows visible focus; Enter and Space activate.