Buttons (Category)
A sliding button allows users to deliberately confirm the
intended action
Variants
/Category%20Buttons%20Variants.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
/Category%20Buttons%20Anatomy.png)
Size
Sliding buttons have a fixed width of 327px and corners are rounded to 300 px.
/Category%20Buttons%20Size.png)
Text Style
Sliding buttons have a text size of 14px, and uses Sentence case. Use “Body (Emphasis)” text style on Figma.
/Category%20Buttons%20Text.png)
Dos and Don'ts
/Category%20Buttons%20Do.png)
Use only when deliberate confirmation is needed from the user. All dimensions should be fixed.
/Category%20Buttons%20Dont.png)
Do not truncate the Singlife burst as well as the text within the slider.