Stable
Tabs switch between views of the same thing without leaving the screen: Due, Submitted and History readings, for example. The selected tab has an accent underline.
Tabs are buttons with role="tab" inside a role="tablist". Move between them with the arrow keys, and show only the selected panel.
Specifications
Anatomy
1) Selected tab
color: var(--at-text)
border-bottom: 2px solid var(--at-border-primary)
2) Tab
color: var(--at-text-subtle)
font-size: var(--at-text-sm) /* 14px */
font-weight: var(--at-weight-bold)
3) Tab list
border-bottom: 1px solid var(--at-border)
margin-bottom: var(--at-space-5) /* 16px */
Anatomy
1) Selected tab
color: var(--at-text)
border-bottom: 2px solid var(--at-border-primary)
2) Tab
color: var(--at-text-subtle)
font-size: var(--at-text-sm) /* 14px */
font-weight: var(--at-weight-bold)
3) Tab list
border-bottom: 1px solid var(--at-border)
margin-bottom: var(--at-space-5) /* 16px */
Size and spacing
Tab
padding: var(--at-space-3) var(--at-space-4) /* 8px 12px */
Spacing
gap between tabs: var(--at-space-2) /* 4px */
Tabs
Two to five tabs. Put the most used view first and select it by default.
Example
States
Default
color: var(--at-text-subtle)
Hover
color: var(--at-text)
Focus
outline: 3px solid var(--at-border-focus)
outline-offset: 2px
Selected
color: var(--at-text)
border-bottom-color: var(--at-border-primary)
Example
States
Default
color: var(--at-text-subtle)
Hover
color: var(--at-text)
Focus
outline: 3px solid var(--at-border-focus)
outline-offset: 2px
Selected
color: var(--at-text)
border-bottom-color: var(--at-border-primary)
Usage
When to use
- Two to five views of the same thing.
When not to use
- Steps in a process: show one step per page.
- Going to a different part of the app: use links.
- More than five views: use a select.
Content
- One or two words per tab: "Due", "History".
- Do not put counts in every tab; add one only where it helps, such as "Due (3)".
Do and don't
Do
- Keep labels to one or two words.
Don't
- Nest tabs.
Implementation
HTML
<div class="at-tabs" role="tablist">
<button type="button" class="at-tab" role="tab" aria-selected="true">Due</button>
<button type="button" class="at-tab" role="tab" aria-selected="false">Submitted</button>
<button type="button" class="at-tab" role="tab" aria-selected="false">History</button>
</div>
<p>Due readings</p>Classes
| Class | What it does |
|---|---|
at-tabs | Tab row |
at-tab | One tab; aria-selected="true" marks the current one |
Tokens used
--at-border, --at-text-subtle, --at-text, --at-border-primary
Accessibility
- Use role="tablist" / "tab" / "tabpanel" and move with arrow keys.