Icon Button
A square, icon-only button for compact toolbars and headers.JSX
<IconButton aria-label="Settings" icon={<SettingsIcon />} />Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/corenpm
npm install @advui/coreUsage
import { IconButton } from '@advui/core'
import { SearchIcon } from '@advui/icons'
<IconButton aria-label="Search" icon={<SearchIcon />} />Examples
Basic
Preview
Code
Variants
Preview
Code
Sizes
Preview
Code
API reference
IconButton
Accepts every Button prop except label/icon props.| Prop | Type | Default | Description |
|---|---|---|---|
icon required | ReactElement | — | The icon to render. |
aria-label required | string | — | Accessible name — required because there is no visible label. |
variant | 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'link' | 'ghost' | Same variants as Button. |
size | 'sm' | 'md' | 'lg' | 'md' | 32, 40 or 48px square. |
circular | boolean | false | Fully rounded. |
Accessibility
aria-labelis required by the types so every icon button has an accessible name.- Wrap in a Tooltip to show the same label visually on hover/focus.
- Touch targets are extended to 44pt on native via
hitSlop.
| Key | Action |
|---|---|
| Enter / Space | Activates the button. |
Platform notes
Web
Renders a native
<button>.iOS
Use
size="lg" in navigation bars for comfortable tapping.Android
Press feedback is the pressed background, or the native ripple with
androidRipple (on in material()).