Tabs — Orbit

Overview

Style

Accessibility

Description

What it does

Tabs organise related content into distinct sections that share a single view. Only one panel is visible at a time; the user selects which to show.

Where it appears

Component detail pages, settings screens, profile views, and any context where discrete categories of content exist at the same level of the hierarchy.

Why it exists

Showing all content simultaneously creates cognitive overload. Tabs allow users to focus on one area at a time while remaining aware that more exists nearby.

Tabs change the visible content within a page; they do not navigate between pages. For navigation, use the sidebar or breadcrumb components. In Figma the tab list can be placed on the top, bottom, start or end, can scroll, and tabs come in five sizes (XS to XL) with default, hover, selected and disabled states.

Anatomy

Part	Required?	Notes
Tab list	Required	The container for all tab controls. Receives `role="tablist"`.
Active tab	Required	The currently selected tab. Indicated by a 2px underline in the brand border colour, darker label text and `aria-selected="true"`.
Inactive tab	Required	Unselected tabs. Receive `aria-selected="false"` and `tabindex="-1"` so they are not in the default tab order.
Disabled tab	Optional	A tab that cannot be selected right now. Dimmed label; selected tabs can be disabled too. Keep it in the tab order with `aria-disabled="true"` so people can discover why.
Scroll buttons	Conditional	Arrow buttons at each end of the tab list when the tabs overflow. Use the scrolling Tab Group in Figma.
Tab panel	Required	The content region associated with the active tab. Receives `role="tabpanel"` and is linked to its tab via `aria-controls` / `aria-labelledby`.

Variants

Overview

Activity

Settings

Jane Hoffman · Registered stakeholder since March 2024.

Submitted feedback on 3 proposals in the last 90 days.

Email notifications on. SMS notifications off.

Top placement (default)

Tabs run horizontally above their panel

The default placement. Use for most in-page content switching.

Details

Permissions

Consultation opened 1 Feb, closes 28 Feb 2026.

Only project admins can edit submission status.

Start placement (vertical)

Tabs run down the side of their panel

Settings-style screens with several sections and enough horizontal space for a side rail.

Overview

Activity

Jane Hoffman · Registered stakeholder since March 2024.

Submitted feedback on 3 proposals in the last 90 days.

With icons

A leading icon reinforces each tab's label

When icons are already established elsewhere in the surrounding navigation and reinforce recognition — don't add icons to tabs in isolation.

Usage guidelines

When to use

Content divides cleanly into 2–7 parallel sections at the same hierarchy level.
Users are likely to focus on one section at a time rather than needing to compare across them.
The tab labels can be short, distinct, and self-explanatory without additional context.

When not to use

When content should be compared across sections — keep it visible simultaneously.
When sections form a sequence — use a stepper or wizard pattern instead.
When there are more than 7 tabs — use a sidebar or dropdown navigation.
For page-level navigation — tabs are for in-page content switching only.

Do / Don't

Keep tab labels short — one or two words. "Overview", "Activity", "Settings". Users scan tabs, not read them.

Don't

Don't put form elements that affect the whole page inside one tab. Actions that span tabs should live outside the tab component.

Make the default tab the most commonly needed one. Don't default to a tab that's empty or rarely relevant.

Don't

Don't use tabs to create wizard-like flows. If completing step 2 depends on step 1, use a stepper.

Layout & Spacing

Element	Spec
Tab height	About 35 / 46 / 58 / 72 / 86px (XS to XL), medium 58px: vertical padding plus one line of text
Tab padding	Vertical 8 / 12 / 16 / 20 / 24px, horizontal 12 / 16 / 24 / 32 / 40px. `--orbit-tab-size-*-padding-block`, `-padding-inline`
Gap (icon to label)	4 / 8 / 12 / 16 / 20px. `--orbit-tab-size-*-gap`
Active indicator	2px bottom border. `--orbit-tab-indicator-width`, `--orbit-tab-selected-indicator`
Tab list track	2px line along the tab list. `--orbit-tab-group-track-*`
Panel padding	`--op-space-20`
Label font size	12 / 14 / 16 / 20 / 24px. `--orbit-tab-size-*-font-size`
Label weight	Semibold on every tab. `--orbit-tab-font-weight`
Inactive label colour	`--orbit-tab-text`
Active label colour	`--orbit-tab-selected-text`

Component tokens

Framework-neutral CSS variables, so any framework can use them without Web Awesome. Colours follow Light and Dark mode and the product theme.

Token	What it sets
`--orbit-tab-text`, `-selected-text`, `-hover-text`, `-disabled-text`	Label colour per state.
`--orbit-tab-selected-indicator`, `-disabled-indicator`, `-indicator-width`	The underline on the selected tab. The selected colour is the brand border colour, which meets 3:1 against the page.
`--orbit-tab-state-hover`	Translucent overlay on hover.
`--orbit-tab-size-{xs	s
`--orbit-tab-group-track-color`, `-track-width`	The line running along the tab list.
`--orbit-tab-focus-ring-{color	width}`
`--orbit-tab-font-family`, `-font-weight`	Label type (semibold).

States are Default, Hover, Selected (with Disabled for each); focus is the ring.

Element	Token
Tab list track	`--orbit-tab-group-track-color`
Active indicator	`--orbit-tab-selected-indicator`
Hover background	`--orbit-tab-state-hover`
Disabled label and indicator	`--orbit-tab-disabled-text`, `--orbit-tab-disabled-indicator`
Focus ring	`--orbit-tab-focus-ring-color`, `--orbit-tab-focus-ring-width`, drawn inside the tab

Engineering notes

The tab navigation script uses **automatic activation** — selecting a tab immediately shows its panel. If loading a panel is slow or causes layout shift, use **manual activation**: arrow keys move focus between tabs but Enter or Space is required to activate.
Use hidden to hide inactive panels, not display: none via CSS classes — the hidden attribute is semantically meaningful to assistive technology.
The aria-label on the tablist describes the set of tabs as a whole ("Project details", "Component settings"). Don't duplicate individual tab labels.

Keyboard interaction

Key	Action
`Tab`	Moves focus to the active tab (first pass), then into the panel content on the next press. Inactive tabs are skipped in the tab order.
`Arrow Right / Arrow Left`	Moves focus between tabs. Wraps at either end.
`Home`	Moves focus to the first tab.
`End`	Moves focus to the last tab.
`Enter or Space`	Activates the focused tab (required for manual-activation mode; optional in auto-activation mode).

Why it matters

Tabs have a specific keyboard pattern that differs from most components. Unlike a list of links, tabs use arrow keys to navigate between them — not Tab. This is intentional: it lets keyboard users skip past the entire tab list in one press when they want to reach the panel content directly. Deviating from this pattern breaks the experience for users who rely on assistive technology.

ARIA

Role or attribute	When to use	Example
`role="tablist"`	Applied to the tab container. Groups the set of tabs.	`<div role="tablist" aria-label="Project details">`
`aria-label`	Applied to the tablist. Describes the purpose of the tab set (e.g. "Project details").	`<div role="tablist" aria-label="Project details">`
`role="tab"`	Applied to each tab button. Identifies each item as a tab control.	`<button role="tab" id="tab-overview" aria-controls="panel-overview">Overview</button>`
`aria-selected`	Applied to each tab. "true" for the active tab, "false" for all others.	`<button role="tab" aria-selected="true">Overview</button>`
`aria-controls`	Applied to each tab. Points to the ID of the associated panel.	`<button role="tab" aria-controls="panel-overview">Overview</button>`
`role="tabpanel"`	Applied to each panel. Identifies the panel content region.	`<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview">`
`aria-labelledby`	Applied to each panel. Points to the ID of the controlling tab.	`<div role="tabpanel" aria-labelledby="tab-overview">`

Things to avoid

Don't make all panels visible simultaneously to assistive technology — use hidden on inactive panels.
Don't use <a href> elements as tabs unless they genuinely navigate to a new URL. Tab controls should be <button> elements.
Don't put the focus indicator only on the active indicator underline — the full tab must receive a visible focus ring.

Web Awesome implementation

Tabs uses wa-tab-group with wa-tab (in the nav slot) and wa-tab-panel children. The group manages the roving tabindex, arrow-key navigation, and linking each tab to its panel automatically — you only need to give matching panel / name values.

<wa-tab-group>
  <wa-tab slot="nav" panel="overview" active>Overview</wa-tab>
  <wa-tab slot="nav" panel="activity">Activity</wa-tab>
  <wa-tab slot="nav" panel="settings">Settings</wa-tab>

  <wa-tab-panel name="overview">
    <!-- Overview content -->
  </wa-tab-panel>
  <wa-tab-panel name="activity">
    <!-- Activity content -->
  </wa-tab-panel>
  <wa-tab-panel name="settings">
    <!-- Settings content -->
  </wa-tab-panel>
</wa-tab-group>

Manual activation

By default, arrowing to a tab activates it immediately. Set activation=“manual” when activating a tab triggers an expensive action (e.g. a network request) — the user then presses Enter or Space to activate the focused tab.

<wa-tab-group activation="manual">
  <wa-tab slot="nav" panel="responses" active>Responses</wa-tab>
  <wa-tab slot="nav" panel="reports">Reports</wa-tab>
  <wa-tab-panel name="responses"><!-- ... --></wa-tab-panel>
  <wa-tab-panel name="reports"><!-- ... --></wa-tab-panel>
</wa-tab-group>

Placement

<!-- Tabs down the side instead of across the top -->
<wa-tab-group placement="start">
  <wa-tab slot="nav" panel="details" active>Details</wa-tab>
  <wa-tab slot="nav" panel="permissions">Permissions</wa-tab>
  <wa-tab-panel name="details"><!-- ... --></wa-tab-panel>
  <wa-tab-panel name="permissions"><!-- ... --></wa-tab-panel>
</wa-tab-group>

HTML pattern

The ARIA tabs pattern requires three roles working together: tablist, tab, and tabpanel. Each tab is linked to its panel via aria-controls and aria-labelledby. Only the active tab is in the default tab order (tabindex=“0”); inactive tabs use tabindex=“-1” and are reachable only via arrow keys.

<div class="tabs">
  <div role="tablist" aria-label="Project details">
    <button
      role="tab"
      id="tab-overview"
      aria-controls="panel-overview"
      aria-selected="true"
      tabindex="0"
    >Overview</button>
    <button
      role="tab"
      id="tab-activity"
      aria-controls="panel-activity"
      aria-selected="false"
      tabindex="-1"
    >Activity</button>
    <button
      role="tab"
      id="tab-settings"
      aria-controls="panel-settings"
      aria-selected="false"
      tabindex="-1"
    >Settings</button>
  </div>

  <div
    role="tabpanel"
    id="panel-overview"
    aria-labelledby="tab-overview"
  >
    <!-- Overview content -->
  </div>

  <div
    role="tabpanel"
    id="panel-activity"
    aria-labelledby="tab-activity"
    hidden
  >
    <!-- Activity content -->
  </div>

  <div
    role="tabpanel"
    id="panel-settings"
    aria-labelledby="tab-settings"
    hidden
  >
    <!-- Settings content -->
  </div>
</div>

Keyboard navigation script

const tablist = document.querySelector('[role="tablist"]');
const tabs = Array.from(tablist.querySelectorAll('[role="tab"]'));

tablist.addEventListener('keydown', (e) => {
  const current = tabs.indexOf(document.activeElement);
  let next;

  if (e.key === 'ArrowRight') next = (current + 1) % tabs.length;
  else if (e.key === 'ArrowLeft') next = (current - 1 + tabs.length) % tabs.length;
  else if (e.key === 'Home') next = 0;
  else if (e.key === 'End') next = tabs.length - 1;
  else return;

  e.preventDefault();
  activateTab(tabs[next]);
});

function activateTab(tab) {
  tabs.forEach(t => {
    t.setAttribute('aria-selected', 'false');
    t.setAttribute('tabindex', '-1');
    document.getElementById(t.getAttribute('aria-controls')).hidden = true;
  });
  tab.setAttribute('aria-selected', 'true');
  tab.setAttribute('tabindex', '0');
  tab.focus();
  document.getElementById(tab.getAttribute('aria-controls')).hidden = false;
}