Tabs
Switch between sections of related content. Underline for page sections, Pill for in-card switching.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
Project summary, goals and key dates.
4 new comments since yesterday.
Rename, archive or transfer this project.
<div class="px-tabs" data-px-tabs style="width:100%">
<div class="px-tabs__list" role="tablist" aria-label="Project">
<button type="button" role="tab" class="px-tab" id="tb-1" aria-controls="tp-1" aria-selected="true">Overview</button>
<button type="button" role="tab" class="px-tab" id="tb-2" aria-controls="tp-2" aria-selected="false" tabindex="-1">Activity <span class="px-count px-count--sm">4</span></button>
<button type="button" role="tab" class="px-tab" id="tb-3" aria-controls="tp-3" aria-selected="false" tabindex="-1">Settings</button>
<button type="button" role="tab" class="px-tab" aria-selected="false" tabindex="-1" disabled>Billing</button>
</div>
<div class="px-tabs__panel" role="tabpanel" id="tp-1" aria-labelledby="tb-1" tabindex="0">Project summary, goals and key dates.</div>
<div class="px-tabs__panel" role="tabpanel" id="tp-2" aria-labelledby="tb-2" tabindex="0" hidden>4 new comments since yesterday.</div>
<div class="px-tabs__panel" role="tabpanel" id="tp-3" aria-labelledby="tb-3" tabindex="0" hidden>Rename, archive or transfer this project.</div>
</div>Usage
- Tabs switch views; they do not navigate to other pages.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>Examples
Pill
px-tabs--pill.
Visitors are up 12% this week.
Most visitors are from India and the US.
Change the tracking settings.
<div class="px-tabs px-tabs--pill" data-px-tabs>
<div class="px-tabs__list" role="tablist" aria-label="Range">
<button type="button" role="tab" class="px-tab" aria-selected="true" aria-controls="tq-1"><svg class="px-icon" aria-hidden="true">…</svg>Analytics</button>
<button type="button" role="tab" class="px-tab" aria-selected="false" tabindex="-1" aria-controls="tq-2"><svg class="px-icon" aria-hidden="true">…</svg>Audience</button>
<button type="button" role="tab" class="px-tab" aria-selected="false" tabindex="-1" aria-controls="tq-3"><svg class="px-icon" aria-hidden="true">…</svg>Settings</button>
</div>
<div class="px-tabs__panel" role="tabpanel" id="tq-1">Visitors are up 12% this week.</div>
<div class="px-tabs__panel" role="tabpanel" id="tq-2" hidden>Most visitors are from India and the US.</div>
<div class="px-tabs__panel" role="tabpanel" id="tq-3" hidden>Change the tracking settings.</div>
</div>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-tabs · --pill · --sm | class | Type and size. |
data-px-tabs | attribute | Click + arrow keys + Home/End. |
role="tablist|tab|tabpanel" | attribute | ARIA wiring with aria-controls. |
Figma properties
Tabs4 variants · page “Tabs”Open
Tab bar built from Tab instances. Underline spans the container with a hairline track; Pill hugs its tabs. RTL starts from the right. Wrap in role=tablist.
| Property | Type | Values |
|---|---|---|
| Type | Variant | Underline Pill |
| Direction | Variant | LTR RTL |
Tab40 variants · page “Tabs”Open
Single tab. Underline for page-level sections, Pill for compact in-card switching. role=tab with aria-selected; arrow keys move between tabs.
| Property | Type | Values |
|---|---|---|
| Label | Text | “Tab label” |
| Icon | Boolean | — |
| Icon swap | Instance swap | — |
| Count | Boolean | — |
| Type | Variant | Underline Pill |
| Size | Variant | Small Medium |
| State | Variant | Active Hover Focused Selected Disabled |
| Direction | Variant | RTL LTR |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-table-header-background | color-surface-sunken | #f9fafb |
--px-table-header-content | color-content-neutral-secondary | #475467 |
--px-table-border | color-border-neutral-subtle | #f2f4f7 |
--px-table-content | color-content-neutral-secondary | #475467 |
--px-table-radius | radius-16 | 16px |
--px-table-header-height | spacing-40 | 40px |
--px-table-row-height | spacing-56 | 56px |
--px-table-cell-padding-x | spacing-2xl | 24px |
--px-tab-indicator | color-border-brand-default | #2563eb |
--px-tab-height-sm | control-height-sm | 32px |
--px-tab-height-md | spacing-32 | 32px |
--px-tab-indicator-width | border-width-md | 2px |
--px-tab-radius | radius-8 | 8px |
--px-tab-padding-x | spacing-12 | 12px |
Show all 17 tokens
| Token | Alias | Light value |
|---|---|---|
--px-tabs-list-padding | spacing-4 | 4px |
--px-tabs-list-radius | radius-12 | 12px |
--px-tabs-list-gap | spacing-4 | 4px |
Accessibility
- Arrow keys move between tabs (mirrored in RTL).
- Only the selected tab is in the tab order.