Tabs
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Tabs container: The outermost element with class
.tabs. - Navigation wrapper: Contains the tab buttons, class
.tabs-nav-wrapper. - Tab button: Each clickable tab, class
.tab-button. - Tab content: The content area for each tab, class
.tab-content.
See Accordion spec for detailed format.
States
- Enabled: Tab can be selected, default appearance.
- Hovered: Tab is hovered, shows hover style.
- Active/Selected: Tab is selected, shows active style.
- Disabled: Tab cannot be selected, shows disabled style.
See Accordion spec for detailed format.
Options
- size: 'sm' | 'md' (tab size)
- color: 'neutral' | 'accent'
- theme: 'default' | 'alternative'
- side: 'left' | 'right' | 'top' | 'bottom' (tab position)
- flipped: boolean (flip border position)
- indicatorSide: 'same' | 'opposite'
Behaviors
- Supports horizontal and vertical layouts.
- Scrollable navigation if tabs overflow.
- Keyboard navigation (arrow keys) supported.
See Accordion spec for accessibility/keyboard details.
Changelog
| Date | Type | Description | Author | Associated issue(s) |
|---|---|---|---|---|
| YYYY-MM-DD | new | Initial design | Oanh Nguyen | PAR-52 |