A clickable button (or link styled as a button) with variants, sizes, loading and icon support.
Save changes
<nana-button variant="primary">Save changes</nana-button>
npm install @nana-tec/ui-components
import "@nana-tec/ui-components/button";
<nana-button variant="primary">Save changes</nana-button>
Primary
Secondary
Tertiary
Danger
Success
Ghost
Link
<nana-button variant="primary">Primary</nana-button>
<nana-button variant="secondary">Secondary</nana-button>
<nana-button variant="tertiary">Tertiary</nana-button>
<nana-button variant="danger">Danger</nana-button>
<nana-button variant="success">Success</nana-button>
<nana-button variant="ghost">Ghost</nana-button>
<nana-button variant="link">Link</nana-button>
XS
SM
MD
LG
XL
<nana-button size="xs">XS</nana-button>
<nana-button size="sm">SM</nana-button>
<nana-button size="md">MD</nana-button>
<nana-button size="lg">LG</nana-button>
<nana-button size="xl">XL</nana-button>
Default
Disabled
Loading
<nana-button>Default</nana-button>
<nana-button disabled>Disabled</nana-button>
<nana-button loading>Loading</nana-button>
Properties
| Property | Attribute | Type | Default | Description |
|---|
active | — | boolean | false | Pressed / current state (visual only — not a variant). |
ariaLabel | aria-label | string | null | null | |
as | — | ButtonAs | 'button' | Polymorphic host element. `href` implies `a` automatically. |
disabled | — | boolean | false | |
form | — | string | undefined | — | |
fullWidth | full-width | boolean | false | |
href | — | string | undefined | — | |
iconOnly | icon-only | boolean | false | |
loading | — | boolean | false | |
loadingText | loading-text | string | undefined | — | |
name | — | string | undefined | — | |
rel | — | string | undefined | — | |
rounded | — | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'md' | |
shape | — | ButtonShape | 'default' | Layout shape (radius system). Overrides `rounded` when not `default`. |
size | — | Size | 'md' | |
target | — | '_blank' | '_self' | '_parent' | '_top' | undefined | — | |
type | — | 'button' | 'submit' | 'reset' | 'button' | |
value | — | string | undefined | — | |
variant | — | ButtonVariant | 'primary' | |
Events
| Event | Description |
|---|
nana-click | |
Slots
| Slot | Description |
|---|
(default) | Button label |
prefix | Content before the label (e.g. a leading icon) |
suffix | Content after the label (e.g. a trailing icon) |
CSS parts
| Part | Description |
|---|
::part(base) | The underlying `<button>` or `<a>` element |
::part(loader) | The spinner shown while `loading` |
CSS custom properties
| Property | Description |
|---|
--nana-button-bg | Background colour (hover derives from it automatically) |
--nana-button-color | Text colour |
--nana-button-radius | Corner radius (overrides the `rounded` attribute) |
| Event | Type | Description |
|---|
nana-click | CustomEvent | — |
| Slot | Description |
|---|
(default) | Button label |
prefix | Content before the label (e.g. a leading icon) |
suffix | Content after the label (e.g. a trailing icon) |
| Variable | Default | Description |
|---|
--nana-button-bg | — | Background colour (hover derives from it automatically) |
--nana-button-color | — | Text colour |
--nana-button-radius | — | Corner radius (overrides the rounded attribute) |
| Part | Description |
|---|
base | The underlying <button> or <a> element |
loader | The spinner shown while loading |
- Keyboard accessible
- Screen-reader labels
- Focus-visible states
- ARIA roles and states
- WCAG 2.2 AA contrast
Explore Button interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook
