Keep labels to one or two words for fast scanning.
Tabs
Segmented navigation for switching between related content panels within the same context.
Active
Default
Disabled
- .source-tabs Tab bar container
- .source-tab Individual tab trigger
- [aria-selected="true"] Active tab state
- .source-tabs-indicator Animated underline indicator
- .source-tab-panel Linked content panel
States
State
Appearance
Default
Secondary text color, transparent background.
Hover
Primary text color, raised background tint with rounded top corners, ghost indicator line scales in from the center.
Pressed
Darker background for immediate press feedback. Transitions instantly on press, eases out on release.
Focus
2px inset outline in primary text color. Keyboard only; does not show on click.
Selected
Primary text, medium weight. Sliding indicator animates to this tab.
Disabled
Uses disabled text color, cannot be clicked, and is skipped by arrow and Home/End keyboard navigation.
Design intent
Tabs work when the user already knows roughly what to expect in each panel. If they need to explore without a clear destination, tabs create confusion. Use tabs for parallel views of the same object, not for sequential steps or top-level navigation between unrelated sections.
When to use
Do
Use tabs when users only need one panel at a time.
Use for alternate views of the same entity or context.
Don't
Avoid labels that wrap, truncate, or read like instructions.
Do not use tabs for ordered step-by-step flows.
Do not replace page navigation with tabs across unrelated sections.
Palette
Default palette is neutral. Use palette="accent" (or any semantic palette) when you want tinted active and hover states.
Tab labels
Keep labels short, one or two words. Describe the content type, not the action. "Code" not "View code". "Accessibility" not "Check accessibility". Avoid tabs for navigation between unrelated pages; use a nav component instead.
Designer checklist
- Tab labels are one or two words. No sentence-length labels.
- The number of tabs is five or fewer. More tabs degrade to a navigation problem.
- Tab panels are not used for sequential steps that must be completed in order.
- The active tab is identifiable without relying only on color.
Tabs props
Prop
Type
Default
Description
defaultTab
string
null
ID of the tab selected on first render. Use for uncontrolled mode.
activeTab
string
null
Controlled active tab ID. Pair with onTabChange.
onTabChange
(id: string) => void
null
Called whenever the active tab changes.
palette
`neutral \| accent \| success \| warning \| danger \| info`
neutral
Color palette for hover, active background, and indicator.
children
ReactNode
required
Tab and TabPanel elements.
Tab props
Prop
Type
Default
Description
id
string
required
Unique identifier that links this tab to its TabPanel.
children
ReactNode
required
Label shown in the tab button.
disabled
boolean
false
Disables interaction and keyboard selection for this tab.
TabPanel props
Prop
Type
Default
Description
id
string
required
Must match the id of the corresponding Tab.
children
ReactNode
required
Content shown when this panel is active.
Usage
Import the component styles once at your app root, then use Tabs, Tab, and TabPanel anywhere in your tree. Pass defaultTab for uncontrolled use or activeTab + onTabChange for controlled.
import '@pierredelattre/source-tokens';
import '@pierredelattre/source-react/styles';
import { Tabs, Tab, TabPanel } from '@pierredelattre/source-react';
function Demo() {
return (
<Tabs defaultTab="overview">
<Tab id="overview">Overview</Tab>
<Tab id="code">Code</Tab>
<Tab id="settings" disabled>Settings</Tab>
<TabPanel id="overview">
<p>Overview content</p>
</TabPanel>
<TabPanel id="code">
<p>Code content</p>
</TabPanel>
<TabPanel id="settings">
<p>Settings content</p>
</TabPanel>
</Tabs>
);
}Accent palette
<Tabs defaultTab="overview" palette="accent">
<Tab id="overview">Overview</Tab>
<Tab id="code">Code</Tab>
<TabPanel id="overview">...</TabPanel>
<TabPanel id="code">...</TabPanel>
</Tabs>Controlled
const [active, setActive] = useState('overview');
<Tabs activeTab={active} onTabChange={setActive}>
<Tab id="overview">Overview</Tab>
<Tab id="code">Code</Tab>
<TabPanel id="overview">...</TabPanel>
<TabPanel id="code">...</TabPanel>
</Tabs>Component tokens
All tokens are defined on .source-tabs and reference global semantic tokens by default. Override on a parent selector to restyle in a specific context without touching globals.
.sidebar .source-tabs {
--source-tab-indicator-color: var(--source-color-info);
--source-tab-bg-active: color-mix(in srgb, var(--source-color-info) 8%, transparent);
}
Token
Default
--source-tab-color
--source-color-text-label
--source-tab-color-hover
--source-color-text-secondary
--source-tab-color-active
--source-color-text
--source-tab-color-disabled
--source-color-text-disabled
--source-tab-bg-hover
--source-color-surface-raised
--source-tab-bg-active
--source-color-surface-raised
--source-tab-bg-press
color-mix(--source-color-text 10%)
--source-tab-border-color
--source-color-border
--source-tab-indicator-color
--source-color-text
--source-tab-indicator-height
2px
--source-tab-radius
--source-radius-sm
--source-tab-font-size
--source-text-sm
--source-tab-font-weight-active
500
--source-tab-padding-x
--source-spacing-4
--source-tab-padding-y
--source-spacing-2
ARIA attributes
Attribute
Purpose
role="tablist"
Marks the container as a tab group.
role="tab"
Marks each button as a tab control.
aria-selected
Set to
true on the active tab, false on all others. Updated by JS on activation.
aria-disabled
Set on disabled tabs to communicate non-interactive state to assistive technology.
hidden
Boolean attribute on inactive panels. Removes them from the accessibility tree entirely.
Keyboard support
Key
Behavior
Tab
Moves focus to the next focusable element, including inactive tab buttons. Disabled tabs are skipped.
Enter / Space
Activates the focused tab.
Arrow Left / Right
Moves focus and activates the previous or next enabled tab. Wraps around at both ends.
Home / End
Moves focus and activates the first or last enabled tab.