UX Patterns Guide
Back to compare picker

Tabs vs Segmented control vs Pagination

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.

Tabs live exampleSegmented control live examplePagination live example

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 Help users switch between sibling sections in the same page context without changing routes or losing local work.Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.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.Tiny numbers with no current state.
Good UX Users switch between sibling sections without leaving page context or losing panel-local notes.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
Help users switch between sibling sections in the same page context without changing routes or losing local work.
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
Users switch between sibling sections without leaving page context or losing panel-local notes.
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
Help users switch a local mode, view, filter, sort, or presentation immediately without navigation or form submission.
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
Tiny numbers with no current state.
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.