Tabs

Use GdsTabs and GdsTab when the user needs to switch between peer views on the same screen. Tabs are best for local navigation inside a page, not for moving between pages.

Tone

Use the tone that matches the surface emphasis.

Default

Default tabs use the GDS default tone and a 2px indicator.

Active / Inactive

The selected tab is active. The other tabs stay inactive until selected.

With icon / without icon

Use an icon when it helps the user scan the tab quickly. Leave it off when the label is already enough.

With text / without text

Tabs can be icon-only when space is tight. If you remove the label, keep an accessible name with aria-label.

Icon positions

Icons can sit on the left, right, or top of the label. GdsTab maps those values to MUI’s start, end, and top positions.

Vertical

Pass orientation="vertical" for a stacked tab list. The 2px indicator moves to the trailing edge.

Props