Toggle/Switch

null

Anatomy

Defining shared language for discussing the construction and structure of this component.

null

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

null

Disabled

null

Enabled

null

Disabled

null

Nested

Figma component (internal only)

Examples

Enabled

null

Disabled

null

Enabled

null

Disabled

null

Additional options

Android switches may also have descriptions and icons.

Examples

Light

null

Dark

null

Light

null

Dark

null

Behavior and interaction

Reference Material Design for general guidance when designing for Android.

Writing guidelines

Localization