#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 · Storybook

#Usage

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.

#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.

#With icons

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

#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.

#With separator

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

#With indicator

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

#Full width

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

#Controlled

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

#Props

#SegmentedTabsTrigger

#Explorer