Icon Button
A compact, icon-only button. Renders a named nana-icon and requires a label for accessibility.
Variants
html
| 1 | <nana-icon-button name="x-circle" label="Close"></nana-icon-button> |
| 2 | <nana-icon-button name="ellipsis-vertical" label="More" variant="ghost"></nana-icon-button> |
| 3 | <nana-icon-button name="x-circle" label="Delete" variant="danger"></nana-icon-button> |
Sizes & states
Import
ts
| 1 | import "@nana-tec/ui-components/icon-button"; |
Props
| Attribute | Type | Default |
|---|---|---|
name | icon name | — |
label | string | "" |
variant | default | ghost | outlined | danger | default |
size | sm | md | lg | md |
disabled | boolean | false |
loading | boolean | false |
href | string | — |