# Tab

## Usage

Individual tab item that renders as a button or an anchor link, with selected-state styling and optional icons.

A `Tab` reads the selection and the size from the surrounding `TabList`, so it always renders inside one. The default slot is the label. `icon` shows while the tab is not selected and `selectedIcon` while it is; `endContent` follows the label for a badge or a status dot. With `href` the tab renders as a link, unless the strip is a `role="tablist"` and the tab points at its panel with `panelId` instead.

```vue
<script setup lang="ts">
import { Tab, TabList } from '@astryx-vue/core/TabList'
import { ref } from 'vue'

const value = ref('inbox')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="inbox">
      Inbox
    </Tab>
    <Tab value="sent">
      Sent
    </Tab>
  </TabList>
</template>
```

## Examples

Common configurations, variations, and states.

### Selected Icon

A tab that changes its icon when selected.

```vue
<script setup lang="ts">
import { Tab, TabList } from '@astryx-vue/core/TabList'
import { ref } from 'vue'

const value = ref('favorites')
</script>

<template>
  <TabList v-model:value="value">
    <Tab value="favorites">
      <template #icon>
        <span class="css-icon css-icon--sm i-carbon-star" />
      </template>
      <template #selectedIcon>
        <span class="css-icon css-icon--sm i-carbon-star-filled" />
      </template>
      Favorites
    </Tab>
    <Tab value="recent">
      Recent
    </Tab>
  </TabList>
</template>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `string` | — | Unique value of this tab. The surrounding `TabList` matches its own `value` against it to decide the selection. Required. |
| `label` | `string` | — | Visible text. The default slot wins when both are given, and this prop becomes the accessible name while the label is hidden. |
| `panelId` | `string` | — | ID of the panel this tab controls, for `aria-controls`. Only used when the strip is a `role="tablist"`. |
| `disabled` | `boolean` | `false` | Whether the tab is disabled. Keyboard navigation skips it. |
| `href` | `string` | — | URL to navigate to. Outside the tabs pattern the tab renders as a link. Ignored inside a `role="tablist"` strip. |
| `as` | `NavLinkComponent` | `'a'` | Link root component, such as a router link. Only applies when there is an `href` and the strip is not a tablist. |
| `isLabelHidden` | `boolean` | `false` | Hides the label visually. Only the icon and the end content show, and `label` becomes the accessible name. |

## Slots

- `default`: the label text. Falls back to the `label` prop.
- `icon`: icon shown while the tab is not selected.
- `selectedIcon`: icon shown while the tab is selected. Falls back to `icon`.
- `endContent`: content after the label, such as a badge count or a status dot.