Toggle

Both the default and small toggle variants share the same color and interactive state properties.

The default and small toggle can be switched on and off across focus, disabled, and read-only states.

State	Element	Property	Color token
Focus	Toggle	border	`$focus`
Disabled	Label text	text-color	`$text-disabled`
	State text	text-color	`$text-disabled`
	Background	background-color	`$button-disabled`
	Handle	background-color	`$icon-on-color-disabled`
	Checkmark	inner fill	`$button-disabled`
Read-only	Label text	text-color	`$text-secondary`
	State text	text-color	`$text-primary`
	Background	background-color	transparent
	Border	border	`$border-subtle` *
	Handle	background-color	`$icon-primary`

* Denotes a contextual color token that will change values based on the layer it is placed on.

Toggle labels should be set in sentence case, with only the first word in a phrase and any proper nouns capitalized, and no more than three words.

Element	Font-size (px/rem)	Font-weight	Type token
Label text	12 / 0.75	Regular / 400	`$label-01`
State text	14 / 0.875	Regular / 400	`$body-compact-01`

Element	Property	px / rem	Spacing token
Toggle	width	48 / 3	–
	height	24 / 1.5	–
Handle	height, width	18 / 1.25	–
Label text (feature flag)	margin-top, margin-bottom	8 / 0.5	`$spacing-03`
Label text	margin-top, margin-bottom	16 / 1	`$spacing-05`
State text	margin-left	8 / 0.5	`$spacing-03`

Structure and spacing measurements for default toggle with a feature flag enabled | px / rem

Structure and spacing measurements for default toggle with a feature flag disabled | px / rem

Element	Property	px / rem	Spacing token
Toggle	width	32 / 2	–
	height	16 / 1	–
Handle	height, width	10 / 0.625	–
Label text (feature flag)	margin-top, margin-bottom	8 / 0.5	`$spacing-03`
Label text	margin-top, margin-bottom	16 / 1	`$spacing-05`
State text	margin left	8 / 0.5	`$spacing-03`

Structure and spacing measurements for small toggle with a feature flag enabled | px / rem

Structure and spacing measurements for small toggle with a feature flag disabled | px / rem

Size	Height (px / rem)
Small (sm)	16 / 1
Default	24 / 1.5

Default and small sizes of toggle | px / rem

Help us improve this component by providing feedback, asking questions, and leaving any other comments on GitHub.

Color