IconButton places a decorative thin-stroke icon inside an accessible button target.
01Preview
02Usage
Load @dg/ui/styles.css once in the root layout.
<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>
03Notes
- 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.
04Parameters
| 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. |
05Methods
| Name | Description |
|---|---|
focus() | Focus the button without scrolling. Access with bind:this. |
06Accessibility
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.