UX Patterns Guide
Back to compare picker

Tabs vs Segmented control vs Pagination

Use tabs for sibling content panels in one page context, segmented controls for local mode or presentation choices, and pagination for moving through one ordered collection split across pages.

Tabs live exampleSegmented control live examplePagination live example
Learn the decision

Match the interaction to the person's task

Use tabs for sibling content panels in one page context, segmented controls for local mode or presentation choices, and pagination for moving through one ordered collection split across pages.

Tabs

Use it when: Users switch between sibling panels frequently.

Make this state clear: Default active tab and visible panel.

Observe the result: Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel.

Study the full pattern →

Segmented control

Use it when: There are a few mutually exclusive modes.

Make this state clear: Default selected segment.

Observe the result: Selecting a segment changes a nearby local mode, filter, or view immediately.

Study the full pattern →

Pagination

Use it when: The collection has many ordered results.

Make this state clear: First page with disabled previous control.

Observe the result: Users move through pages while query, filters, and sort persist.

Study the full pattern →

Practice the judgment: Imagine this situation: Using tabs as links to unrelated destinations. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.

Review the underlying principle →

Decision dimensions

Dimension TabsSegmented controlPagination
UI or UX UI + UX - Section-switching componentUI + UX - Compact mode selectorUI + UX - Paged navigation control
UI guidance Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab.Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing.Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states.
UX guidance Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps.Avoid using segments for unrelated pages, hidden content sections, destructive actions, or choices that need long explanation.Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab.Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row.Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI Tabs wrap unpredictably or look like unrelated buttons.Many cramped segments with truncated text.Pagination jumps around as pages load or separates controls from the result list.
Good UX Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel.Selecting a segment changes a nearby local mode, filter, or view immediately.Users move through pages while query, filters, and sort persist.
Bad UX Using tabs as primary navigation to unrelated pages.Using segments for unrelated destinations.Changing page resets filters.
Best fit Users switch between sibling panels frequently.There are a few mutually exclusive modes.The collection has many ordered results.
Avoid when The destinations are unrelated pages.Options are full content sections needing tab semantics.Users need uninterrupted reading or comparison.
Required state Default active tab and visible panel.Default selected segment.First page with disabled previous control.
Accessibility burden Expose the active tab and associated panel.Expose selected or pressed state and the group name.Use a labeled navigation region.
Common misuse Using tabs as a primary site navigation system.Using segments for unrelated page navigation.Using pagination for a tiny collection.

Tabs

UI or UX
UI + UX - Section-switching component
UI guidance
Render a tablist with short tab labels, selected tab styling, visible keyboard focus, and a single associated tabpanel that is visually connected to the active tab.
UX guidance
Avoid tabs when users must compare panels, read panels sequentially, or complete required workflow steps.
Good UI
Tab labels are short, active tab is obvious, focused tab is distinguishable, and panel content is visually attached to the selected tab.
Bad UI
Tabs wrap unpredictably or look like unrelated buttons.
Good UX
Keyboard users can move focus with arrows, activate with Enter or Space, and then reach the selected panel.
Bad UX
Using tabs as primary navigation to unrelated pages.
Best fit
Users switch between sibling panels frequently.
Avoid when
The destinations are unrelated pages.
Required state
Default active tab and visible panel.
Accessibility burden
Expose the active tab and associated panel.
Common misuse
Using tabs as a primary site navigation system.

Segmented control

UI or UX
UI + UX - Compact mode selector
UI guidance
Render a compact horizontal group with two to four adjacent segments, one selected state, visible focus, and stable sizing.
UX guidance
Avoid using segments for unrelated pages, hidden content sections, destructive actions, or choices that need long explanation.
Good UI
Two to four adjacent segments with a clear selected segment, visible focus ring, and readable labels that fit on one row.
Bad UI
Many cramped segments with truncated text.
Good UX
Selecting a segment changes a nearby local mode, filter, or view immediately.
Bad UX
Using segments for unrelated destinations.
Best fit
There are a few mutually exclusive modes.
Avoid when
Options are full content sections needing tab semantics.
Required state
Default selected segment.
Accessibility burden
Expose selected or pressed state and the group name.
Common misuse
Using segments for unrelated page navigation.

Pagination

UI or UX
UI + UX - Paged navigation control
UI guidance
Render a labeled pagination nav near the affected results with current page, previous, next, nearby pages, optional first/last or ellipsis, and clear disabled edge states.
UX guidance
Help users move through an ordered result set with a stable sense of position, progress, and returnability.
Good UI
Current page, previous/next, disabled edges, page numbers, result range, and total count are visually clear.
Bad UI
Pagination jumps around as pages load or separates controls from the result list.
Good UX
Users move through pages while query, filters, and sort persist.
Bad UX
Changing page resets filters.
Best fit
The collection has many ordered results.
Avoid when
Users need uninterrupted reading or comparison.
Required state
First page with disabled previous control.
Accessibility burden
Use a labeled navigation region.
Common misuse
Using pagination for a tiny collection.
Decision rules
  • Prefer tabs when each choice reveals a peer content panel under the same parent task and only one panel should be visible at a time.
  • Prefer segmented controls when two to four closely related choices change a compact mode, filter, density, sort, or presentation of the same nearby content rather than revealing a separate panel.
  • Prefer pagination when users move through an ordered result set or record collection where page position, previous/next, current page, result range, and total pages matter.
  • Do not use tabs when users must compare panels side by side or read every panel in sequence; use headings, a table of contents, or separate visible sections instead.
  • Do not use segmented controls for deep navigation or hidden content panels; they should change an immediate local state.
  • Do not use segmented controls for actions like add, edit, delete, or submit; use buttons or menus for commands.
  • Do not use pagination for sibling topics; page numbers imply ordered slices of one collection, not independent sections.
  • Do not use pagination if changing page would reset query, filters, sort, or page size; preserve those controls or use a simpler result list.
Inspect live examples
TabsSegmented controlPagination
Failure modes
  • Using tabs as links to unrelated destinations.
  • Using segmented controls for deep navigation.
  • Using pagination when users need comparison across hidden pages.
  • Letting tabs destroy draft panel state when users switch away.
  • Using tabs for a required multi-step workflow without completion status.
  • Allowing a segmented control to wrap into multiple rows or affect distant content with no visible update.
  • Resetting filters, sort, or scroll context when a user moves to the next page.
  • Showing active previous or next controls at the first or last page.

Saved items