Lead: Yehiel Elad-Certner -
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>
<< Most communicative screenshot of the component >>
Basic Flow
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
Types
<< Relevant only if the component has several distinct types (e.g. editable tables, nested tables). In this case each type should be described in a sub-page >>
<<If you are using this section Usage & Behaviour should be used only for the Common functionalities in the page>>
...
Type
...
Usage
...
Image
...
<< Link to the relevant page >>
...
<< Link to the relevant page >>
Usage & Behaviour
<< Use a visual for each sub-section >>
General guidelines
<< Describes the component, use sub-section when they are relevant to the components >>
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Structure
<<A description of the structure of the component, including areas, sub-components etc.>>
Placement and Positioning
<<For example, in popups and toast messages>>
Default State
<<When there is more than one state for a control or area. Including default values>>
Content
<<Including labels, microcopy, number of items, order of items etc.>>
Internal Logic
<<For example, controls dependencies in a form>>
States
<<e.g. active disabled, error, hover, temporary (spinner size), empty etc...>>
...
State
...
Image
...
Comment
...
<<Can be splitter to several if needed e.g. https://kanasoftware.jira.com/wiki/spaces/UserExp/pages/916130232/Primary+Regular+and+emphasised#PrimaryRegularandemphasised-States >>
Interaction
<<for example, how to change a value – type, arrows, use slider>>
<<use Click target to describe the interaction>>
Validations and errors
<<used for specific components e.g. slider>>
Transitions
<<Used to describe transitions or animations the occurs in any of the interaction stages>>
Best practices
<<e.g. Slider should display a label its on>>
Use:
<…>
<…>
Don’t use
...
<…>
...
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 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>>
...
Zeplin link | Screen thumbnail | <<Short Zeplin link. You |
|---|---|---|
<<Screen with 200 width>>https://zpl.io/V4AZnjN |  | |
 |
Code
<<a box containing the code - discuss with Femi>>