Buttons (Slider)
A sliding button allows users to deliberately confirm the intended action.
Variants
/Slider%20Button%20Variant.png)
| Variant | Usage |
|---|---|
|
Default |
Button before the user slides it |
|
Active |
Button as the user is sliding it |
|
Disabled |
Not available for use due to insufficient information / values / invalidated business rules |
Anatomy
All sliding button types share the same anatomy and are made up of the following:
- Text label: Text labels can expand
- Track: Shows the area that is available for a user to slide across
- Thumb: A position indicator for a user to move along the track
/Slider%20Button%20Anatomy.png)
Size
Sliding buttons have a fixed width of 327px and corners are rounded to 300 px.
/Slider%20Button%20Size.png)
Text Style
Sliding buttons have a text size of 14px, and uses Sentence case. Use “Body (Emphasis)” text style on Figma.
/Slider%20Button%20Text%20Style.png)
Dos and Don'ts
/Slider%20Button%20Do.png)
Use only when deliberate confirmation is needed from the user. All dimensions should be fixed.
/Slider%20Button%20Dont.png)
Do not truncate the Singlife burst as well as the text within the slider.