Lead: Yehiel Elad-Certner -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
Segmented button display a set of icon or text buttons in a row as a single element. A segmented button allows users to choose one or more out of a range of available options.
Icon
...
Text
...
Usage & Behaviour
A segmented Button is commonly used as:
...
A button group of equal options.
The action items can be represented by either text or an icon.
The options should be equal in width and prominence , each part taking the same size.when using icons
Default State
The default selection is always the first option in a segmented Button.
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.
States
State | ImageIcon | Text | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Active |  |  | |
Disabled |  |  |
Interaction
In a case of a single selection segmented button, there should always be one selected.
In case of a multi Selection segmented button, states of multiple selection or none are availableWhen Clicking on an unselected item in the segmented Button, the current selected item should automatically be deselected and viewed as regular.
Best practices
Use:
A segmented button should be used instead Instead of a dropdown when there are only a few options and enough room to fit within the UI.
segmented buttons can be used as a When you want to switch between different viewsalternative views of the same content.
Should only be used for up to 5 options.
Don’t use
If there are more than 5 option, consider using a different component typeDropdown Menu/Radio Buttons.
If the option aren't closely related contextually ,Use a segmented button when you want alternative views of the same contentUse Tabs instead.
Accessibility compliance
...