Forms & Inputs
Icon Button
A compact, icon-only button. Renders a named nana-icon (or slotted icon) and requires a label for accessibility.
Preview
Section titled “Preview”<nana-icon-button name="edit" label="Edit"></nana-icon-button>
<nana-icon-button name="link" label="Link"></nana-icon-button>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/icon-button";Basic usage
Section titled “Basic usage”<nana-icon-button name="edit" label="Edit"></nana-icon-button><nana-icon-button name="link" label="Link"></nana-icon-button>Variants
Section titled “Variants”<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>Sizes & states
Section titled “Sizes & states”<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 | disabled | boolean | false | Disable the button |
href | href | string | undefined | — | Render as a link |
label | label | string | '' | Accessible label (required for icon-only controls) |
loading | loading | boolean | false | Show a spinner instead of the icon |
name | name | IconName | undefined | — | Named icon to render |
size | size | Size | 'md' | Size |
target | target | '_blank' | '_self' | '_parent' | '_top' | undefined | — | Link target |
variant | 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 |
--nana-icon-button-color | Icon colour |
Events
Section titled “Events”| Event | Type | Description |
|---|---|---|
nana-click | CustomEvent | Fired on activation |
| Slot | Description |
|---|---|
(default) | Custom icon content (used when name is not set) |
CSS Variables
Section titled “CSS Variables”| Variable | Description |
|---|---|
--nana-icon-button-radius | Corner radius |
CSS Parts
Section titled “CSS Parts”| Part | Description |
|---|---|
button | The underlying button / link element |
Accessibility
Section titled “Accessibility”- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Icon Button interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook