USER INTERFACE ELEMENTS
Toggle
Overview
Toggles are used to turn an option on or off.
Specifications
Toggle
Default (Off)
- Toggle Background Fill Color: #FFFFFF
- Toggle Border Color: #6E6E6E
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #6E6E6E
Selected (On)
- Toggle Background Fill Color: #528320
- Toggle Border Color: #528320
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #FFFFFF
On Focus - (ADA compliant) - appears on keyboard navigation only
- Border Color: #0061A0
- Border Size: 2px
- Toggle Background Fill Color: #FFFFFF
- Toggle Border Color: #6E6E6E
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #6E6E6E
Toggle with Off Label
- Toggle Background Fill Color: #FFFFFF
- Toggle Border Color: #6E6E6E
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #6E6E6E
- Text Color: #333333
- Text: Noto Sans 14px Regular
Toggle with On Label
- Toggle Background Fill Color: #528320
- Toggle Border Color: #528320
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #FFFFFF
- Text Color: #333333
- Text: Noto Sans 14px Regular
Toggle with Label
- Toggle Background Fill Color: #528320
- Toggle Border Color: #528320
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #FFFFFF
- Text Color: #333333
- Text: Noto Sans 16px Regular
Toggle Disabled
- Toggle Opacity: 65%
- Toggle Background Fill Color: #FFFFFF
- Toggle Border Color: #6E6E6E
- Toggle Border Size: 2px
- Toggle Corner Radius: 400px
- Toggle Circle Fill Color: #6E6E6E
Usage Guidelines
Mobile Context Scenario
Notification settings with toggles.