States
States are visual representations used to communicate the status of a component or interactive element.
Note: ‘Component’ used below implies ‘interactive component’.
Types of states
Default
A component is in default state when it is not interacted with.
State logic
Consider it as 0 for reference point.
Default state
Hover
A component is in default state when it is not interacted with.
State logic
+1 (slightly darker) for background color and content such as text (wherever applicable).
Hover state
Active
A component is in default state when it is not interacted with.
State logic
+2 (moderately darker) for background color.
Active state
Focus
A component is in default state when it is not interacted with.
State logic
Focus ring of 3px border, outside.
Focus state
Disabled
A component is in default state when it is not interacted with.
State logic
-2 (moderately lighter) for background.
Disabled state
Loading
A component is in default state when it is not interacted with.
State logic
-2 (moderately lighter) for background and spinner in place of content.
Loading state
Selected
A component is in default state when it is not interacted with.
Selected state
Activated
A component is in default state when it is not interacted with.
Activated state
Dragged
A component is in default state when it is not interacted with.
Dragged state
Examples
Interactive states of Basic button
Interactive states of Primary button
Interactive states of Selection chip in default state
Interactive states of Selection chip in selected state
= Updated from foundation because the color does not have more lighter/darker variations or there is no sufficient contrast.