Lead: Yehiel Elad-Certner -
Segmented buttons display a set of icons or text buttons in a row as a single element.
Segmented buttons allow users to choose one or more out of a range of available options.
 |
 |
A segmented button 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.
A segmented button 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 group.
Button labels need to be as short as possible, and should ideally be only one word.
Alternatively, icons can be used to replace button labels.
State | Icon | Text | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Active |  |  | |
Selected |  |  | |
Disabled |  |  |
Clicking an unselected option in the group should:
change that option to Selected.
automatically deselect the previously-selected button, which is then viewed as Regular.
Use:
When there are only 5 or fewer options.
Where there’s enough room to fit the options within the UI.
When you want to switch between alternative views of the same content.
When the options are closely related in context or content.
Don’t use:
If there are more than 5 option → use a Drop down menu or Radio buttons.
If there is limited room to fit the options within the UI → use a Drop down menu.
If the options aren't closely related in context or content → use Tabs.
<<In general each component should be A11y complied, please follow the 3 guidelines linked below. At the very least we should document that each component is in compliance with each of the 3>>
<<How will the component work with keyboard only - without a mouse. Can be reference if written above
We already set a general guidelines described in /wiki/spaces/UX/pages/308969693 >>
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |
<<a box containing the code - discuss with Femi>>