Lead: Yehiel Elad-Certner -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
Segmented button buttons display a set of icon icons or text buttons in a row as a single element. A segmented button allows
Segmented buttons allow users to choose one or more out of a range of available options.
...
Usage & Behaviour
A segmented Button button is commonly used as:
An alternative to dropdown, radio buttons
segmented buttons can be used as 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 space on screenpanel.
General guidelines
Structure
A Segmented segmented button consists of:
A button group of equal options.
The items can be represented by Individual options presented as either text or an icon.
The When using icons, the options should be of equal in width and prominence when using icons.
Default State
The default selection is always the first option in a segmented Buttonbutton group.
Content
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 |  |  |
Interaction
When Clicking on an unselected item option in the segmented Button, the current selected item should automatically be deselected and viewed as regulargroup should:
change that option to Selected.
automatically deselect the previously-selected button, which is then viewed as Regular.
Best practices
Use:
Instead of a dropdown when When there are only a few options and 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.
Should only be used for up to 5 optionsWhen the options are closely related in context or content.
Don’t use:
If there are more than 5 option , consider using a Dropdown Menu/Radio Buttons→ 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 option options aren't closely related contextually Use Tabs insteadin context or content → use Tabs.
Accessibility compliance
...