A compact, icon-only button. Renders a named nana-icon (or slotted icon) and requires a label for accessibility.
<nana-icon-button name="edit" label="Edit"></nana-icon-button>
<nana-icon-button name="link" label="Link"></nana-icon-button>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/icon-button";
<nana-icon-button name="edit" label="Edit"></nana-icon-button>
<nana-icon-button name="link" label="Link"></nana-icon-button>
<nana-icon-button name="more_vert" label="More"></nana-icon-button>
<nana-icon-button name="more_vert" label="More" variant="ghost"></nana-icon-button>
<nana-icon-button name="more_vert" label="More" variant="outlined"></nana-icon-button>
<nana-icon-button name="cancel" label="Delete" variant="danger"></nana-icon-button>
<nana-icon-button name="check_circle" label="ok" size="sm" variant="outlined"></nana-icon-button>
<nana-icon-button name="check_circle" label="ok" size="md" variant="outlined"></nana-icon-button>
<nana-icon-button name="check_circle" label="ok" size="lg" variant="outlined"></nana-icon-button>
<nana-icon-button name="arrow_forward" label="next" variant="outlined" disabled></nana-icon-button>
<nana-icon-button name="arrow_forward" label="loading" variant="outlined" loading></nana-icon-button>
Properties
| Property | Attribute | Type | Default | Description |
|---|
disabled | — | boolean | false | Disable the button |
href | — | string | undefined | — | Render as a link |
label | — | string | '' | Accessible label (required for icon-only controls) |
loading | — | boolean | false | Show a spinner instead of the icon |
name | — | IconName | undefined | — | Named icon to render |
size | — | Size | 'md' | Size |
target | — | '_blank' | '_self' | '_parent' | '_top' | undefined | — | Link target |
variant | — | IconButtonVariant | 'default' | Visual style |
Events
| Event | Description |
|---|
nana-click | Fired on activation |
Slots
| Slot | Description |
|---|
(default) | Custom icon content (used when `name` is not set) |
CSS parts
| Part | Description |
|---|
::part(button) | The underlying button / link |
CSS custom properties
| Property | Description |
|---|
--nana-icon-button-radius | Corner radius |
| Event | Type | Description |
|---|
nana-click | CustomEvent | Fired on activation |
| Slot | Description |
|---|
(default) | Custom icon content (used when name is not set) |
| Variable | Default | Description |
|---|
--nana-icon-button-radius | — | Corner radius |
| Part | Description |
|---|
button | The underlying button / link element |
- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Explore Icon Button interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
