Layout
Delish has 3 options for the with label variant. The label can be before, after or above the switch.
Visual of layout options
Color / States
Rest
The default or normal appearance when it's not being interacted with.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralStrokeAccessible.Rest |
#295CAD |
|
(2) Thumb |
NeutralStrokeAccessible.Rest |
#295CAD |
|
(3) Label |
NeutralForeground2.Rest |
#595959; |
|
|
Design token |
Value |
|---|---|---|
|
(5) Track |
CompoundBrandBackground.Rest |
#295CAD |
|
(6) Thumb |
NeutralForegroundInverted.Rest |
#FFFFFF |
|
(7) Label |
NeutralForeground2.Rest |
#595959; |
Hover
The hover state refers to the visual and interactive changes that occurs when a user moves their cursor over the button but doesn't click it. The interaction is very temporary and in our case, includes a color change to provide feedback to the user.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralStrokeAccessible.Hover |
#19458B |
|
(2) Thumb |
NeutralStrokeAccessible.Hover |
#19458B |
|
(3) Label |
NeutralForeground2.Rest |
#595959; |
|
|
Design token |
Value |
|---|---|---|
|
(5) Track |
CompoundBrandBackground.Hover |
#0C3069 |
|
(6) Thumb |
NeutralForegroundInverted.Rest |
#FFFFFF |
|
(7) Label |
NeutralForeground2.Rest |
#595959; |
Pressed
The pressed state refers to the visual and interactive changes that occur when a user clicks or taps on it.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralStrokeAccessible.Pressed |
#0C3069 |
|
(2) Thumb |
NeutralStrokeAccessible.Pressed |
#0C3069 |
|
(3) Label |
NeutralForeground2.Rest |
#595959; |
|
|
Design token |
Value |
|---|---|---|
|
(4) Track |
CompoundBrandBackground.Pressed |
#041E47 |
|
(5) Thumb |
NeutralForegroundInverted.Rest |
#FFFFFF |
|
(6) Label |
NeutralForeground2.Rest |
#595959; |
Disabled
When the component is temporarily inactive or unresponsive to user interaction. In this state, the container and label appears grayed out to visually indicate that it cannot be clicked or triggered.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralStrokeDisabled.Rest |
#E4E7E7 |
|
(2) Thumb |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
|
(3) Label |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
|
|
Design token |
Value |
|---|---|---|
|
(4) Track |
NeutralBackgroundDisabled.Rest |
#F0F0F0 |
|
(5) Thumb |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
|
(6) Label |
NeutralForegroundDisabled.Rest |
#AFB6B6 |
Focus
The focus state occurs when it is highlighted, indicating that it is currently selected or in focus. This state is often triggered when a user tabs through interactive elements on a webpage or app, providing a visual cue that it's ready to be activated or clicked. It helps users navigate and interact with the interface, especially for those who rely on keyboard navigation or assistive technologies.
|
|
Design token |
Value |
|---|---|---|
|
(1) Track |
NeutralStrokeAccessible.Rest |
#295CAD |
|
(2) Thumb |
NeutralStrokeAccessible.Rest |
#295CAD |
|
(3) Label |
NeutralForeground2.Rest |
#595959 |
|
(4) Focus ring |
StrokeFocus1.Rest |
#295CAD |
|
(4) Focus ring inner |
StrokeFocus2.Rest |
#FFFFFF |
|
|
Design token |
Value |
|---|---|---|
|
(5) Track |
CompoundBrandBackground.Rest |
#295CAD |
|
(6) Thumb |
NeutralForegroundInverted.Rest |
#FFFFFF |
|
(7) Label |
NeutralForeground2.Rest |
#595959 |
|
(8) Focus ring |
StrokeFocus1.Rest |
#295CAD |
|
(8) Focus ring inner |
StrokeFocus2.Rest |
#FFFFFF |
Specs
|
|
Design token |
Value |
|---|---|---|
|
(1) Container |
N/A |
Width: Variable Height: 36px |
|
(1) Focus ring |
N/A |
2px |
|
(1) Focus ring inner |
N/A |
3px |
|
(2) Track radius |
borderRadiusCircular |
9999px |
|
(3) Switch |
N/A |
Width: 56px Height: 36px |
|
(4) Label |
N/A |
Spacing
|
|
Design token |
Value |
|---|---|---|
|
Track: padding left/right |
spacingHorizontalS |
8px |
|
Track: padding top/bottom |
spacingVerticalS |
8px |
|
Label: padding left |
spacingHorizontalXS |
4px |
|
Label: padding right |
spacingHorizontalS |
8px |