Navigation

Tabs

Pill-style tab strip with optional counts. Vertical (default) or horizontal.

Examples

Horizontal with counts

<Tabs
  direction="horizontal"
  tabs={[
    {value: 'books', label: 'Books', count: 1204},
    {value: 'passages', label: 'Passages', count: 8421},
    {value: 'authors', label: 'Authors', count: 312},
  ]}
  bind:value
/>

Props

Prop	Type	Default	Description
`tabs`	`{value, label, count?, disabled?}[]`	`—`	Tab definitions. Bind by value.
`value`	`T`	`—`	Bindable selected value.
`direction`	`'vertical' \| 'horizontal'`	`'vertical'`	Layout direction.
`onChange`	`(next: T) => void`	`—`	Optional change callback.
`ariaLabel`	`string`	`—`	Accessible label for the tablist.

Install

CLI

npx @a3tai/mittsu add tabs