USER INTERFACE

Tabs & Pills

Switching between views of the same thing — and filtering, choosing and tagging with pills.
THEME
DENSITY
01

Playground

Style, size, overflow and keyboard

Brief

v2 approved by Lena · Sep 20
Goals & audienceSep 20
Mood: calm, honest, daylight
Deliverables: 40 images, 1 film
avava.studio/projects/spring-27#brief
<Tabs variant="underline" size="M" overflow="scroll" activation="auto" counts dots value="brief" onChange={setTab} > <Tab value="brief">Brief</Tab> <Tab value="shoot" count={3}>Shoot</Tab> <Tab value="files" count={42}>Files</Tab> <Tab value="invoices" count={2}>Invoices</Tab> … </Tabs>
Settings
STYLE
SIZE · WIDTH
TABS5 tabs
OVERFLOW · ACTIVATION
Tab into the list, then ← → Home End · selects as you move
02

Tabs · Variants

Six tab patterns used in Avava
Projecteach tab has its own content
JPGmyvatn_hero_04.jpg24 MB
ZIPcoast_selects.zip410 MB
MP4bts_roughcut_v1.mp4640 MB
Vertical · settingsgroups · icons · active bar
ACCOUNTWORKSPACE
SecurityPassword, 2-step verification and sessions.Two-step verification · On3 active sessions
Browser-styleclose ✕ · drag to reorder · + New
AV-2026-041€19,718Nordic Thread · overdue
With statuscounts · warning · unread dot
AV-2026-041 is 12 days overdue — the badge says so before you open the tab.
Mobile · scrollswipe · edge fades
Spring 27
Files · Spring 27
Swipe the row — the fade shows there’s more.
Lazy panelsload on first open · skeleton
OverviewSpring 27 · Post-productionDue Oct 281 of 4 panels loaded · grey dot = not loaded yet
03

Pills

Filter, segment, tag, choose and count
Filter chipsmulti-select · Clear · live count
STATUS
CLIENT
12 of 60 invoices
Segmentedsliding thumb · one choice
CALENDAR
FILES
Oct 12 – 18 · 14 events
Tagsremove ✕ · add with Enter
CampaignOutdoorIceland
Suggested:
Single choicebig pills with icons
Photo projects get Shoot, Selects and Retouch tabs.
Count pillsfilter a list by status
AV-2026-060Nordic ThreadPaid
AV-2026-059Lumen CoffeeOverdue
AV-2026-058Fjord OutdoorViewed
AV-2026-057Kaya CeramicsSent
04

Behaviour

Unsaved changes, kept state, disabled tabs
Unsaved changesasks before switching away
Saved
Keeps its statescroll and input per tab
Atlas StudioBryggen HotelCopenhagen WoolFjord OutdoorFolk CoffeeKaya CeramicsKiln & CoLumen CoffeeMira OpticsNordic ThreadSaga BooksTundra Gear
Type or scroll, switch tabs, come back — it’s all where you left it.
Disabled tabexplains why on hover / focus
Brief — approved Sep 20. Hover or focus the locked tabs to see why they’re locked.
05

Rules & a11y

Markup, checklist and which control when
Markup
<div role="tablist" aria-label="Project sections">
  <button role="tab" id="t-files" aria-selected="true"
          aria-controls="p-files" tabindex="0">Files <span>42</span></button>
  <button role="tab" id="t-chat" aria-selected="false"
          aria-controls="p-chat" tabindex="-1">Chat</button>
</div>
<div role="tabpanel" id="p-files" aria-labelledby="t-files" tabindex="0">…</div>

<!-- pills that filter: toggle buttons, not tabs -->
<button aria-pressed="true">Overdue</button>
Checklist7 of 8 checked
TABSViews of one object; the content below swaps.Project: Brief · Shoot · Files
SEGMENTEDA few mutually exclusive display modes.Day · Week · Month
PILLS / CHIPSFilters and tags — several can be on.Status: Paid, Overdue
NAVIGATIONGoing to a different page or app area.Sidebar, navbar links
DO✓Keep tab labels to one or two words✓Show counts and warnings on the tab itself✓Put the active tab in the URL✓Remember each tab’s scroll and input✓Use “More” or scroll — never wrap tabs onto two lines
DON’T✕Use tabs to move between unrelated pages✕Hide a disabled tab without saying why✕Mix tabs and pills in one row✕Nest tabs inside tabs✕Lose unsaved work on a tab switch