Anatomy
Defining shared language for discussing the construction and structure of this component.
|
Key |
Category |
Parts |
|---|---|---|
|
1 |
Text, Label |
Font family, size/line height, color |
|
2 |
Shape, Thumb |
Background color, border radius |
|
3 |
Shape, Track |
Border radius, border color |
|
4 |
Shape, Track |
Background color, padding (block [top, bottom], inline [left, right]) |
Usage
Figma library (internal only)
Reference Material Design for general guidance when designing for Android.
Variants
Acorn offers 2 Android switch variants in 1 size, with 2 states across 2 modes (themes).
Sizes
States
An Android switch can be on or off, this is a binary switch state applied to the overall component. In addition, Android switches have 2 interactive states that affect the visual output.
Available interactive states: Enabled, and disabled
The disabled state has an important caveat that applies across modes.
Disabled
Disabled visual styles should only be applied when a toggle is disabled.
Disabled switches are unusable. Disable a switch to keep users from interacting with the switch until conditions are met.
Default
Figma component (internal only)
Known as "Switch" in our Figma library file.
Examples
Enabled
Disabled
Enabled
Disabled
Nested
Figma component (internal only)
Examples
Enabled
Disabled
Enabled
Disabled
Additional options
Android switches may also have descriptions and icons.
Examples
Light
Dark
Light
Dark
Behavior and interaction
Reference Material Design for general guidance when designing for Android.