Description

Segmented buttons Selectors display a set of icons or text buttons in a row as a single element. Segmented buttons They allow users to choose one or more options out of a predefined range of available options.

Usage & Behavior

A segmented button selector is commonly used:

• As an alternative to Drop down menu or Radio buttons.

• As a switch between different views.

• As a toggle between two or more content sections within the same panel.

General guidelines

Structure

A segmented button selector consists of:

• A button group of equal options.

• Individual options presented as either text or an icon.

• When using icons, the options should be of equal width and prominence.

...

The default selection is always the first option in a segmented button the group.

Content

Button labels need to be as short as possible, and should ideally be only one word.

...

• change that option to Selected.

• automatically deselect the previously-selected button, which is then viewed as Regular.

Best practices

Use:

• When when there are only 5 or fewer options.

• Where where there’s enough room to fit the options within the UI.

• When when you want to switch between alternative views of the same content.

• When when the options are closely related in context or content.

Don’t use:

• If if there are more than 5 option → use a Drop down menu or Radio buttons.

• If if there is limited room to fit the options within the UI → use a Drop down menu.

• If if the options aren't closely related in context or content → use Tabs.

...