# IconButton

Group: Actions

Square icon-only button for chrome: canvas controls, vault toggle, menus.
- Always provide `label` (used for `aria-label` and the native title).
- `variant`: `ghost` (default), `surface` (floats on the canvas), `primary` (round, filled). `active` shows a pressed toggle.
- Prefer `size="md"` (40px) on touch; `sm` only inside dense toolbars.


## Props

```ts
export interface IconButtonProps { icon: IconName; label: string; variant?: 'ghost' | 'surface' | 'primary'; size?: 'sm' | 'md' | 'lg'; active?: boolean; onClick?: () => void }
```

## Use

```ts
import { IconButton } from '@visualli/design-system/components';
```