# Tab

> Source: https://design.nanatec.co.ke/components/tab/
> A single tab within a `nana-tab-group`. Place tabs in the group's `nav` slot and link each to a panel via the `panel` attribute. The host element is the focusable tab (`role="tab"`), so assistive tech and the group's roving-tabindex navigation operate on a single element.

A single tab within a `nana-tab-group`. Place tabs in the group's `nav` slot and link each to a panel via the `panel` attribute. The host element is the focusable tab (`role="tab"`), so assistive tech and the group's roving-tabindex navigation operate on a single element.

## Preview

```html
<nana-tab-group variant="segmented" style="width:100%">
  <nana-tab slot="nav" panel="a">Overview</nana-tab>
  <nana-tab slot="nav" panel="b">Activity</nana-tab>
  <nana-tab-panel name="a">Overview panel.</nana-tab-panel>
  <nana-tab-panel name="b">Activity panel.</nana-tab-panel>
</nana-tab-group>
```

## Installation

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

## Import

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

## Basic usage

```html
<nana-tab-group style="width:100%">
  <nana-tab slot="nav" panel="a">Tab</nana-tab>
  <nana-tab-panel name="a">Panel.</nana-tab-panel>
</nana-tab-group>
```

## Icons & counts

Add a `count` badge to a tab.

```html
<nana-tab-group style="width:100%">
  <nana-tab slot="nav" panel="inbox" count="12">Inbox</nana-tab>
  <nana-tab slot="nav" panel="drafts" count="3">Drafts</nana-tab>
  <nana-tab-panel name="inbox">Inbox panel.</nana-tab-panel>
  <nana-tab-panel name="drafts">Drafts panel.</nana-tab-panel>
</nana-tab-group>
```

## Closable

Add `closable` to show a close button on a tab.

```html
<nana-tab-group style="width:100%">
  <nana-tab slot="nav" panel="a">Overview</nana-tab>
  <nana-tab slot="nav" panel="settings" closable>Settings</nana-tab>
  <nana-tab-panel name="a">Overview panel.</nana-tab-panel>
  <nana-tab-panel name="settings">Settings panel.</nana-tab-panel>
</nana-tab-group>
```

## API

## Events

| Event | Type | Description |
|---|---|---|
| `nana-tab-close` | `CustomEvent` | Emitted when the tab is closed via the button or Delete / Backspace (`detail.panel`). |

## Slots

| Slot | Description |
|---|---|
| `(default)` | The tab's label. |
| `prefix` | Content before the label, typically an icon. |
| `suffix` | Content after the label, e.g. a count badge. |

## CSS Variables

| Variable | Default | Description |
|---|---|---|
| `--nana-tab-hover-bg` | — | Hover fill for the pill, filled and ghost variants. Defaults to a translucent tint of the text colour, so it reads on any surface; set an opaque colour to pin it. |
| `--nana-tab-active-bg` | — | Fill of the active thumb in the segmented variant. |

## CSS Parts

| Part | Description |
|---|---|
| `base` | The tab's inner container |
| `count` | The built-in count badge |
| `close-button` | The close button |

## Related components

<ul class="related not-content">
  <li><a href="/components/breadcrumb/">Breadcrumb</a></li>
  <li><a href="/components/breadcrumb-item/">Breadcrumb Item</a></li>
  <li><a href="/components/menu/">Menu</a></li>
  <li><a href="/components/menu-item/">Menu Item</a></li>
  <li><a href="/components/menu-label/">Menu Label</a></li>
</ul>

## Storybook

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