Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

Components

Button - Segmented

Also known as: Segmented button, Segmented control

Don't use: proposed USWDS v3
The button segmented component provides secondary navigation within a page using a group of buttons in a row as a single element.

Examples

Web

This component has not yet been built for the web.

Mobile

2 segments

View va-mobile_segmented-control–2-segments in Storybook

3 segments

View va-mobile_segmented-control–2-segments in Storybook

4 segments

View va-mobile_segmented-control–2-segments in Storybook

Usage

Additional guidance for VA

When to use a Button - Segmented

  • Filtering a data set. To represent the same kind of content, such as a list-view with different filters applied.
  • Views of a data set. To provide closely related choices that affect an object, state, or view. For example, a segmented control can help people select options, switch between views, or sort elements.

When to consider something else

  • If you need to group content that is dissimilar.
  • If you need to enable actions — such as adding, removing, or editing content.
  • If it needs to be accompanied by any other controls or a title if used in the top navigation bar.

Behavior

A segmented control consists of a horizontal set of 2-4 segments, each of which functions as a button. One option is always selected. The component does not scroll horizontally.

Placement

Mobile
  • It appears in either the top navigation bar or below that navigation bar, near the top of the screen.
  • It should not be used in the bottom toolbar because toolbar items act on the current screen — they don’t let people switch contexts.

Instances of this component in production

  • Claims uses an Active/Closed segmented control to filter claims by status.
  • Appointments uses an Upcoming/Past segmented control to filter appointments by type.
  • Claims also uses a segmented control to show the Status/Details of claims. This is not an appropriate use of this component since it groups content that is dissimilar. In this case, a different component should be considered.

Content considerations

  • Keep labels to 1 word. If you need 2 (or more) words, you’re likely trying to include extraneous words or group together items that are not similar enough. You may need to consider using a different component. The label text must be short enough that it doesn’t wrap in the component.
  • Consider if labels are used elsewhere on the screen. You can help differentiate different sections beneath the segmented control by not reusing the same labels.

Accessibility considerations

Mobile
  • Reference Segmented Control / Tab - Native app accessibility checklist - MagentaA11y
  • Font scaling. This component will ignore a user’s settings for font scaling so the text always remains the same size. This is consistent with Apple’s segmented control component.
  • Name. Purpose is clear and matches visible label
  • Role. Identifies as a button in iOS and “double tap to activate” in Android
  • Group. Visible label (if any) is grouped or associated with the button in a single swipe
  • State. Expresses its state (selected/disabled/dimmed)
Edit this page in GitHub (Permissions required)
Last updated: May 01, 2025