Navigation

Tabs

Switches between sibling views of one thing.

Preview

Props

Guidelines

Switches between sibling views of one thing. The selected tab is the raised thumb (selected-fill with selected-shadow) with bold text, on a solid background-layer-1 track with a surface-edge hairline.

Provide: items ({ key, label, icon }), label, and value with onChange or defaultValue.

• Use inside a brand or project page, never as the main navigation.

• Tabs sit on a solid track (background-layer-1 with a surface-edge hairline) with the same rounded-rectangle shape as the panels below (radius-lg outside, radius-default pills inside); the current tab is the raised selected thumb, bold. No underline.

• Tabs are 32px tall pills, at least 88px wide, on a 4px track, so a short row of sections reads as one clear control.

• The thumb slides. When the current tab changes, the raised thumb glides from the old tab to the new one (motion-duration-200, motion-ease-in-out). Until it is measured, the chosen tab draws its own thumb, so nothing jumps on load. Reduced motion moves it at once.

• Tabs are content, so the track is solid, not glass (October 20, 2026).