#Tabs

Switches between a few peer sections of one page without going anywhere — Tabs owns the panels, which is what separates it from SegmentedControl. Underline tabs are the default for a page’s primary division; reach for SegmentedTabs for scoped views of one collection or a second level below these, SegmentedControl for a toggle that owns no panel, and Accordion when the sections should be open at once.

Source · Storybook

#Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@wallarm-org/design-system/Tabs';

#Examples

#Variants

grayscale mutes the active underline and label for a bar that should sit quieter than the content it introduces.

#Icons

An icon before the label, for a set where the words alone are slow to scan.

#Icons only

Icons with no labels — only for a set the reader already knows, and each trigger still needs an accessible name.

#Badge

A count in the trigger, which is what turns a tab into a status: how much is waiting behind it.

#Sizes

medium and small. Tabs is the one in the switcher family with a size — the segmented pills are fixed height.

#Scrollable

Past the available width the list scrolls sideways with arrow buttons rather than wrapping, so the bar stays one line however many tabs there are.

#Controlled

value plus onChange when something outside the tabs decides which one is open — a route, or a step in a flow.

#Disabled

A disabled trigger keeps its place but drops out of the keyboard order. Prefer hiding a tab that has nothing behind it.

#With separator

TabsSeparator groups the triggers inside one bar, for when two of them belong together more than the rest.

#With line actions

TabsLineActions puts controls on the right of the bar itself, which is where an action about the whole section belongs rather than inside a panel.

#Props

#Explorer