# Icon Button

> Source: https://design.nanatec.co.ke/components/icon-button/
> A compact, icon-only button. Renders a named `nana-icon` (or slotted icon) and requires a `label` for accessibility.

A compact, icon-only button. Renders a named `nana-icon` (or slotted icon) and requires a `label` for accessibility.

## Preview

```html
<nana-icon-button name="edit" label="Edit"></nana-icon-button>
<nana-icon-button name="link" label="Link"></nana-icon-button>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-icon-button name="edit" label="Edit"></nana-icon-button>
<nana-icon-button name="link" label="Link"></nana-icon-button>
```

## Variants

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

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

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-click` | `CustomEvent` | Fired on activation |

## Slots

| Slot | Description |
|---|---|
| `(default)` | Custom icon content (used when `name` is not set) |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-icon-button-radius` | — | Corner radius |

## CSS Parts

| Part | Description |
|---|---|
| `button` | The underlying button / link element |

## 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/">Button</a></li>
  <li><a href="/components/button-group/">Button Group</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-icon-button--docs