> For AI agents: the complete documentation index is available at https://wallarm.github.io/design-system/llms.txt, the full documentation bundle is available at https://wallarm.github.io/design-system/llms-full.txt.

# SegmentedTabs

The pill-skinned tab set: it owns its panels like `Tabs` but wears `SegmentedControl`’s look. Reach for it for scoped views of a single collection — All / Active / Blocked — or as a second level under primary `Tabs`, never as a page’s main tabs. The line against `SegmentedControl` is whether selecting changes _which_ content shows (here) or only _how the same content looks_ (there). Keep the set short: overflow goes to a “More” menu, since these pills do not scroll.

[Source](https://github.com/wallarm/design-system/tree/main/packages/design-system/src/components/SegmentedTabs) · [Storybook](https://wallarm.github.io/design-system/storybook/?path=/docs/navigation-segmentedtabs--overview)

```tsx
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const Basic = () => (
  <SegmentedTabs defaultValue='react' data-testid='segmented-tabs'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

## Usage

```tsx
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';
```

## Examples

### Disabled

A disabled pill stays visible but unselectable, for a scope that exists and currently has nothing to show.

```tsx
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const Disabled = () => (
  <SegmentedTabs defaultValue='react'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react' disabled>
        React
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### With numeric badge

A `NumericBadge` in the pill turns a scope into a count, which is most of the value of this pattern over plain tabs.

```tsx
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const WithNumericBadge = () => (
  <SegmentedTabs defaultValue='react'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='vue'>
        Vue
        <NumericBadge>1</NumericBadge>
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### With icons

An icon beside the label, for scopes that read faster as symbols.

```tsx
import { CircleDashed } from '@wallarm-org/design-system/icons';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const WithIcons = () => (
  <SegmentedTabs defaultValue='react'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react'>
        <CircleDashed />
        React
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='vue'>
        <CircleDashed />
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='solid'>
        <CircleDashed />
        Solid
        <NumericBadge>1</NumericBadge>
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='svelte'>
        <CircleDashed />
        <NumericBadge>1</NumericBadge>
      </SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### With context action

A pill can carry its own action button — the three-dot menu appears on hover, which is how a saved view gets rename and delete without leaving the row.

```tsx
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from '@wallarm-org/design-system/SegmentedTabs';

export const WithContextAction = () => (
  <SegmentedTabs defaultValue='react'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react'>
        React
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SegmentedTabsTriggerButton />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>Action 1</DropdownMenuItem>
            <DropdownMenuItem>Action 2</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SegmentedTabsTrigger>

      <SegmentedTabsTrigger value='vue'>
        Vue
        <NumericBadge>1</NumericBadge>
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SegmentedTabsTriggerButton />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>Action 1</DropdownMenuItem>
            <DropdownMenuItem>Action 2</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SegmentedTabsTrigger>

      <SegmentedTabsTrigger value='solid'>
        Solid
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SegmentedTabsTriggerButton />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>Action 1</DropdownMenuItem>
            <DropdownMenuItem>Action 2</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SegmentedTabsTrigger>

      <SegmentedTabsTrigger value='svelte'>
        Svelte
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <SegmentedTabsTriggerButton />
          </DropdownMenuTrigger>
          <DropdownMenuContent>
            <DropdownMenuItem>Action 1</DropdownMenuItem>
            <DropdownMenuItem>Action 2</DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### With separator

`SegmentedTabsSeparator` splits the fixed presets from what follows, which is the seam the overflow menu sits behind.

```tsx
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@wallarm-org/design-system/DropdownMenu';
import { Ellipsis } from '@wallarm-org/design-system/icons';
import { NumericBadge } from '@wallarm-org/design-system/NumericBadge';
import { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const WithSeparator = () => (
  <SegmentedTabs defaultValue='react'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>

      <SegmentedTabsTrigger value='vue'>
        Vue
        <NumericBadge>1</NumericBadge>
      </SegmentedTabsTrigger>

      <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>

      <SegmentedTabsSeparator />

      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <SegmentedTabsButton>
            <Ellipsis />
            More
          </SegmentedTabsButton>
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>Action 1</DropdownMenuItem>
          <DropdownMenuItem>Action 2</DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>
    </SegmentedTabsList>
    <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
    <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
    <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
    <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### With indicator

The `indicator` dot marks a saved or custom view, so a user-made scope is distinguishable from the built-in ones.

```tsx
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const WithIndicator = () => (
  <SegmentedTabs defaultValue='all'>
    <SegmentedTabsList>
      <SegmentedTabsTrigger value='all'>All Attacks</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='critical' indicator>
        Critical
      </SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='api'>API Abuse</SegmentedTabsTrigger>
      <SegmentedTabsTrigger value='custom' indicator>
        Custom View
      </SegmentedTabsTrigger>
    </SegmentedTabsList>
    <SegmentedTabsContent value='all'>All Attacks Content</SegmentedTabsContent>
    <SegmentedTabsContent value='critical'>Critical Content</SegmentedTabsContent>
    <SegmentedTabsContent value='api'>API Abuse Content</SegmentedTabsContent>
    <SegmentedTabsContent value='custom'>Custom View Content</SegmentedTabsContent>
  </SegmentedTabs>
);
```

### Full width

`fullWidth` stretches the row to its container, for a toolbar where the pills should span rather than huddle left.

```tsx
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const FullWidth = () => (
  <div className='min-w-800'>
    <SegmentedTabs defaultValue='react' fullWidth>
      <SegmentedTabsList>
        <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>
        <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>
        <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>
        <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
      </SegmentedTabsList>
      <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
      <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
      <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
      <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
    </SegmentedTabs>
  </div>
);
```

### Controlled

`value` and `onChange` when the scope lives outside the component — in the URL, or shared with a filter.

```tsx
import { useState } from 'react';
import { SegmentedTabs, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsTrigger } from '@wallarm-org/design-system/SegmentedTabs';

export const Controlled = () => {
  const [value, setValue] = useState<string>('vue');

  return (
    <SegmentedTabs value={value} onChange={setValue}>
      <SegmentedTabsList>
        <SegmentedTabsTrigger value='react'>React</SegmentedTabsTrigger>

        <SegmentedTabsTrigger value='vue'>Vue</SegmentedTabsTrigger>

        <SegmentedTabsTrigger value='solid'>Solid</SegmentedTabsTrigger>

        <SegmentedTabsTrigger value='svelte'>Svelte</SegmentedTabsTrigger>
      </SegmentedTabsList>
      <SegmentedTabsContent value='react'>React Content</SegmentedTabsContent>
      <SegmentedTabsContent value='vue'>Vue Content</SegmentedTabsContent>
      <SegmentedTabsContent value='solid'>Solid Content</SegmentedTabsContent>
      <SegmentedTabsContent value='svelte'>Svelte Content</SegmentedTabsContent>
    </SegmentedTabs>
  );
};
```

## Props

| Prop          | Type                                     | Default | Description |
| ------------- | ---------------------------------------- | ------- | ----------- |
| fullWidth     | `{ true: string; false: string; }`       | `false` |             |
| value         | `string \| undefined`                    |         |             |
| defaultValue  | `string \| undefined`                    |         |             |
| lazyMount     | `boolean \| undefined`                   | `true`  |             |
| unmountOnExit | `boolean \| undefined`                   | `true`  |             |
| onChange      | `((value: string) => void) \| undefined` |         |             |
| data-testid   | `string \| undefined`                    |         |             |

### SegmentedTabsTrigger

| Prop           | Type                                                 | Default | Description                                                    |
| -------------- | ---------------------------------------------------- | ------- | -------------------------------------------------------------- |
| value \*       | `string`                                             |         |                                                                |
| asChild        | `boolean \| undefined`                               | `false` |                                                                |
| indicator      | `boolean \| undefined`                               | `false` | Show a small brand-colored dot indicator next to the tab label |
| title          | `string \| undefined`                                |         |                                                                |
| defaultChecked | `boolean \| undefined`                               |         |                                                                |
| defaultValue   | `string \| number \| readonly string[] \| undefined` |         |                                                                |
| autoFocus      | `boolean \| undefined`                               |         |                                                                |
| id             | `string \| undefined`                                |         |                                                                |
| tabIndex       | `number \| undefined`                                |         |                                                                |
| rel            | `string \| undefined`                                |         |                                                                |
| onChange       | `ChangeEventHandler<T, Element> \| undefined`        |         |                                                                |
| type           | `"button" \| "submit" \| "reset" \| undefined`       |         |                                                                |
| disabled       | `boolean \| undefined`                               | `false` |                                                                |
| name           | `string \| undefined`                                |         |                                                                |
| data-testid    | `string \| undefined`                                |         |                                                                |

## Explorer