Skip to content
SproutAceve · v3.11.0
Get started
Overview What is your role? Getting started Install Adopting Sprout
Foundations
Brand & logos Color Typography Spacing & layout Elevation Iconography Accessibility
Components
Overview Buttons Inputs & forms Data grid Ribbon toolbar Navigation Cards Dialog Tabs Context menu
Practice
Interaction & motion Voice & content Product patterns AI patterns
People & ethics
Design principles Personas UX ethics Trust & direction
Playground
Build the systemplay Tower of tokensplay
Behind the system
How it works Why it pays Changelogv3.11 Roadmap Contribute
Components

Tabs.

Beta — usable, but the API may still change.

Horizontal tabs switch between views of the same object without leaving the page. Use them for parallel sections of one record — never as primary navigation between different parts of the product.

Anatomy

A tablist, one selected tab, and a single visible panel.

Summary of the project — budget, status and the team assigned.

Accessibility

Tabs are a keyboard pattern first, a visual one second.

role="tablist"Wraps the row of tabs; labelled with aria-label or aria-labelledby.
role="tab"Each tab; the selected one carries aria-selected="true".
role="tabpanel"The content region, tied to its tab via aria-controls / aria-labelledby.
Arrow keysLeft / Right move between tabs; Home / End jump to first / last.
Tab keyMoves focus out of the tablist into the active panel — not between tabs.
← PreviousDialogNext →Context menu
Sprout · Aceve Design System · v3.11.0
Figma library GitLabReleases