Tabs

Where to use it

Place them below a page or panel heading when several peer views share the same parent context.

When to use it

Use tabs for a small set of peer views that share the same context.

When not to use it

Avoid tabs for sequential steps, unrelated destinations, or a large number of choices.

Behavior and rules

Use tabs for peer views that share one context; changing tab should not unexpectedly change the user’s place in the wider product.

Anatomy

Tab list

A row of labels with role=tablist. Arrow keys move between tabs, Tab moves into the panel.

Selected tab

Differs by weight, colour and indicator, and carries aria-selected="true".

Selection indicator

An underline or pill that slides to the active tab. It is a second cue besides colour.

Tab panel

The content for the selected tab, linked by aria-labelledby. Only one panel is visible at a time.

All lessons

1. Bar Chart — Compares values across categories using length on a common scale.
2. Line Chart — Shows change across an ordered sequence, most often time.
3. Area Chart — Emphasizes magnitude over an ordered sequence by filling the area under a line.
4. Pie / Donut Chart — Shows a small number of parts that make up one meaningful whole.
5. Scatter Plot — Reveals relationships, clusters and outliers between two numeric variables.
6. Histogram — Shows the distribution of a numeric variable across value ranges.
7. Box Plot — Summarizes distribution, median, spread and potential outliers compactly.
8. Heatmap — Uses color intensity across a matrix to reveal patterns and concentration.
9. Treemap — Shows hierarchical part-to-whole relationships through nested rectangles.
10. Funnel Chart — Shows how a population changes through ordered stages of a process.
11. Waterfall Chart — Explains how positive and negative contributions produce a final total.
12. Sparkline — Shows a compact trend without the full framing of a standard chart.
13. Gauge — Shows one value within a bounded range when position against a threshold matters.
14. Combo Chart — Combines compatible visual marks when two related measures need coordinated comparison.
15. Geographic Data Map — Maps values to locations or regions when geography is part of the question.
16. KPI / Stat Card — Presents one important metric with enough context to judge its current value and change.
17. Data Table — Presents structured records in rows and columns, with table-level search, filtering, sorting, selection and pagination treated as parts of the whole component.
18. Dashboard Card / Panel — Groups one coherent dashboard task, metric or visualization into a bounded region with clear hierarchy.
19. Filter Bar — Places the most important scope controls close to the data they affect.
20. Filter Panel — Collects a larger set of filtering controls in a dedicated surface.
21. Date Picker / Date Range Picker — Lets users choose one date or a bounded time range for reports, filters and analytics.
22. Sidebar Navigation — Provides persistent access to major dashboard destinations and groups.
23. Top App Bar — Holds page identity, global actions and high-priority controls at the top of an application.
24. Breadcrumbs — Shows hierarchy and provides a path back through nested dashboard levels.
25. Tabs — Switches between peer views inside the same dashboard context.
26. Alert / Banner — Communicates important contextual or page-wide information that should remain visible until understood or resolved.
27. Toast — Confirms a brief asynchronous outcome without blocking the current task.
28. Notification Center — Collects system and workflow updates that users may need to revisit.
29. Dropdown / Overflow Menu — Moves lower-priority or contextual actions into an on-demand menu.
30. Modal / Dialog — Creates a focused temporary task that may block interaction with the underlying dashboard.
31. Drawer / Side Panel — Opens contextual controls or details from an edge while preserving the page behind it.