Layout And Organization
Tab Views
Peer panels switched by a row of labelled controls — the about-page's interactive type-tester, already documented in full on Dropdowns & Selectors.
Findings
What's actually in /ig
- The about-page type-tester is the clearest tab-like pattern in /ig: equal-sized swatches that fill with the brand gradient on hover/active and swap content directly, with no separate underline-tab variant found.
Usage
When to use it
Use when
Switching between peer panels of equal hierarchical level where all panels exist in DOM simultaneously (like a type specimen tester or a settings panel group).
Avoid when
Top-level product navigation — that's Tab Bars. Or when only one panel loads at a time, which would benefit from URL-routing rather than tab panels.
Anatomy
Anatomy
- 01
Tab row (equal-width controls)
- 02
Active tab fill (brand gradient)
- 03
Content panel
Specification
Spacing, colour, type, and motion
- Active fill
- var(--ig-gradient-hero) — the same 72.44° rose→magenta→purple gradient used across brand surfaces
- Tab control
- Equal-width, no underline indicator — active state is a fill, not a line
- Transition
- Fill swap is instant or sub-150ms; no sliding-underline animation found
States
States
| State | Behaviour |
|---|---|
| Default (tab) | Control at rest — transparent background, label in --ig-primary-text. |
| Hover (tab) | --ig-hover-overlay applied to the tab control surface. |
| Active (tab) | Brand gradient fill behind the label; label colour adapts to remain legible on the gradient. |
| Panel visible | The content panel for the active tab is visible; all other panels are hidden (display:none or visibility:hidden). |
Examples
Real interface compositions
Brand tooling
Typography tester tabs
Sans, Serif, and Mono swatches sit as equal peers; the active swatch fills with the Instagram gradient and swaps the specimen panel without adding an underline-tab variant.
equal controls, brand gradient active fill, direct panel swap
Guidance
Usage guidance
- This component is fully covered on Dropdowns & Selectors — read that page rather than treating this as a separate pattern; duplicating it here would just restate the same evidence.
Do / Don't
Do / Don't
Do
- Use the brand gradient fill — not an underline indicator or a border — to mark the active tab, matching the only confirmed Instagram pattern.
Don’t
- Use tabs for navigation between separate routes; use them only for in-page panel switching where all content is simultaneously in the DOM.
See also