# Tab (/docs/products/dash-dots/reference/components/tab)

Goes inside `Tabs`.

**Children:** Nothing

## Example

`Tab` is used inside `Tabs`:

![The Tabs component](/assets/images/dash-dots/components/tabs.webp)

```xml title="view.dml"
<Tabs value="{{ tab }}" variant="segmented" onChange="setTab">
  <Tab value="all" label="All" />
  <Tab value="sent" label="Sent" />
  <Tab value="received" label="Received" badge="3" />
</Tabs>
```

```ts title="controller.ts"
export default definePage({
  initialState: { tab: 'all' },
  mutations: {
    setTab: (_state, event: ValueEvent) => ({ tab: event.detail.value }),
  },
});
```

## Props

| Prop       | Type                                                                                                                                                          | What it is                                                                                     |
| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
| `value`    | `string`                                                                                                                                                      | What the `Tabs`' `onChange` sends when the person chooses this tab.                            |
| `label`    | `string`                                                                                                                                                      |                                                                                                |
| `icon`     | [icon name](/docs/products/dash-dots/reference/components#icon-names), or one of [your own icons](/docs/products/dash-dots/developers/theming#your-own-icons) | Before the label, or over it in a `bar`.                                                       |
| `badge`    | `number`                                                                                                                                                      | A count shown next to the label, or on the corner of a `bar` tab's icon, such as unread items. |
| `disabled` | `boolean`                                                                                                                                                     | Dims it, and the person can't use it.                                                          |

## Events

None.