Color
Design variables
Enabled state
Hover, active state
isSelected state
States
States are visual representations used to communicate the status of a segmented control button as an interactive element.
- Enabled – The enabled state of a segmented control button is when the user's cursor is not hovering over it, and the segmented control button isn’t disabled.
- Hover – When the user's cursor is on the segmented control button, it is in a hover state, but has not been clicked yet.
- Active – Segmented control button is in a active state after it has been pressed.
- Focus – Segmented control button is in a focus state when it is targeted via keyboard navigation.
- isSelected – Segmented control button is in the selected state to indicate a completed action.
- Loading – When an action is running, segmented control button is in a loading state. All the segmented control button support this state, and the width does not need to be changed. The cursor will show as ‘in progress’ to indicate that the action is being completed.
- Disabled – Segmented control button is in a disabled state when its action is blocked by something that needs to be completed first, such as changing a field value or waiting for a system response. Its opacity is set to 50%. Add an explanatory tooltip to inform the user why the button is disabled. The cursor will show as ‘not-allowed’ to indicate that the action cannot be executed.
Typography
Segmented control text is written in sentence case. Only the first word of each segmented control button is capitalized unless it includes a proper name or a word we capitalize (see Terminology and vocabulary).
|
|
Font-size (px) |
Font-weight |
|---|---|---|
|
Button label |
13 |
Semi-Bold |
Size
Segment control is available in two sizes. The size should be chosen based on the space available. By default, Soul defines Medium.
Dimensions
Segment control is available in two sizes in height: small (30 px) and medium (36 px). The width is flexible and can be adjusted based on content, layout, and design requirements.
