Tabs

Tabs organize content into logically grouped views without leaving the current page. They help users switch between sections quickly while maintaining context — ideal for rule editors, audit dashboards, and document analysis views.

Variant

Button

Use for compact switching inside a card or panel. Looks like a segmented control and is visually contained.

Text only

With leading icon

With trailing icon

With badge

Variant

Underline

Use as a top-level navigator for a full section or page. Sits inline with the content area and scales to any width.

Text only

With leading icon

With trailing icon

With badge

Structure

Anatomy

The tabs component is composed of the following parts.

Container

Holds the full tablist. Uses page-secondary surface for button variant or a bottom divider for underline.

Tab

A single selectable segment. Renders the label, optional icons, and an optional badge.

Label

14px Geist Medium. Inherits heading color when selected and body color otherwise.

Leading icon

16px. Appears before the label. Inherits the tab's text color.

Trailing icon

16px. Appears after the label. Hidden when a badge is rendered.

Badge

Compact tag that can display a count or status label. Supports leading or trailing icon.

Indicator

Underline variant shows a 2px heading-colored underline under the selected tab.

Usage

Do & Don't

Use the button variant inside cards, modals, and filters.
Use the underline variant as a primary section navigator.
Keep labels short — ideally 1–2 words so every tab is scannable.
Order tabs by priority; put the most used tab first.

Don't

Don't mix button and underline variants on the same surface.
Don't use tabs to switch between destructive actions — use buttons.
Don't stack more than one row of tabs; use grouping or a sidebar instead.
Don't hide critical content inside an unselected tab.