Dimensions
Standard toggle dimensions
Small toggle dimensions
States
States are visual representations used to communicate the status of a button as an interactive element.
Inactive toggle states
Active toggle states
Indeterminate toggle states
|
State |
Description |
|
Inactive |
The toggle is turned off
|
|
Active |
The toggle is turned on
|
|
Indeterminate |
The indeterminate state comes into play when the toggle contains a sublist of toggles. When some toggles are active and some not, we use the indeterminate toggle status. If you click on an indeterminate state, it makes all toggles active.
|
|
Hover |
A toggle is in a hover state when the user's cursor is on the toggle, but they haven't clicked on it yet.
|
|
Loading |
The toggle is in a loading state when an action is running. All current toggles support the loading state, and the width does not need to be changed.
The on-hover cursor type will be set to "in progress" to indicate that the action is being completed.
|
|
Disabled
|
The toggle is in a disabled state when its action is blocked by something that needs to be completed first, like changing a field value or waiting for a system response. Its opacity is 50 %.
Add an explanatory tooltip to inform the user why the toggle is disabled.
The on-hover cursor type will be in the "not-allowed state" to indicate that the requested action will not be executed.
|