# Button

> Source: https://design.nanatec.co.ke/components/button/
> A clickable button (or link styled as a button) with variants, sizes, loading and icon support.

A clickable button (or link styled as a button) with variants, sizes, loading and icon support.

## Preview

```html
<nana-button variant="primary">Save changes</nana-button>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/button";
```

## Basic usage

```html
<nana-button variant="primary">Save changes</nana-button>
```

## Variants

```html
<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>
```

## Sizes

```html
<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>
```

## States

```html
<nana-button>Default</nana-button>
<nana-button disabled>Disabled</nana-button>
<nana-button loading>Loading</nana-button>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-click` | `CustomEvent` | — |

## 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 Variables

| 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) |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The underlying `<button>` or `<a>` element |
| `loader` | The spinner shown while loading |

## Accessibility

<ul class="a11y-grid not-content">
  <li>Keyboard accessible</li>
  <li>Screen-reader labels</li>
  <li>Focus-visible states</li>
  <li>ARIA roles and states</li>
  <li>WCAG 2.2 AA contrast</li>
</ul>

## Related components

<ul class="related not-content">
  <li><a href="/components/button-group/">Button Group</a></li>
  <li><a href="/components/icon-button/">Icon Button</a></li>
  <li><a href="/components/input/">Input</a></li>
  <li><a href="/components/textarea/">Textarea</a></li>
  <li><a href="/components/range/">Range</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-button--docs