Segmented Controls

A segmented control displays different views of the same content, such as a week-long or month-long view of events. To learn more, see Segmented Control.

Use Nouns to Label Segmented Controls

Use 1 or 2 words, most likely nouns, to describe the view that users will see when they click a segmented control.

Why? Although segmented controls are a button component, they don’t follow our usual button language guidelines of using a verb to describe the action the button performs. That’s because it’s more important to describe the different views displayed by the segmented control than it is to describe the action of switching between views.

Note: The slashes (/) are used here to indicate multiple labels on the same segmented control. We don’t use slashes in the UI.

Instead of Long Labels, Consider Icons Paired with Tooltips

Text in a segmented control should not truncate or wrap. If you think a label will exceed the specified maximum width or character count of the segmented control, consider using an icon paired with a tooltip instead.

When writing tooltips to pair with segmented controls, refer to Tooltips and Toasts.