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.
Icon
Text
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 action can be represented by either text or an icon.
The options should be equal in width and prominence, each part taking the same size.
Default State
The default selection is always the first option in a segmented Button.
Content
a segmented Button should only be used for up to 5 options. It is ideal when there are 2 or 3.
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 | Image | 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 available.
Best practices
Use:
A segmented button should be used 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 switch between different views.
Don’t use
If there are more than 5 option, consider using a different component type.
If the option aren't closely related contextually,Use a segmented button when you want alternative views of the same content.
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>>