Lead: Yehiel Elad-Certner - ONGOING
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.
Usage & Behaviour
A segmented Button is commonly used as:
An alternative to dropdown, radio buttons
segmented buttons can be used as a switch between different views
As a toggle between two or more content sections within the same space on screen
General guidelines
Structure
A Segmented button consists of:
A button group of equal options.
The items can be represented by either text or an icon.
The options should be equal in width and prominence 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 | Icon | Text | Comment |
|---|---|---|---|
Regular |  |  | |
Hover |  |  | |
Active |  |  | |
Selected |  |  | |
Disabled |  |  |
Interaction
When Clicking on an unselected item in the segmented Button, the current selected item should automatically be deselected and viewed as regular.
Best practices
Use:
Instead of a dropdown when there are only a few options and enough room to fit within the UI.
When you want to switch between alternative 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 Dropdown Menu/Radio Buttons.
If the option aren't closely related contextually Use Tabs instead.
Accessibility compliance
<<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>>
Focus management
<<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 >>
Screen reader support
<<Make sure the components support screen reader for content or behaviour where needed - see /wiki/spaces/UX/pages/308248620 >>
Contrast & size compliance
<<Visual designers must comply with the minimal of /wiki/spaces/UX/pages/301498483 for each component>>
Design
Zeplin link | Screen thumbnail |
|---|---|
 | |
 |
Code
<<a box containing the code - discuss with Femi>>