Active
You might say
When someone presses the button, make it feel like it's being pushed in.
Show that a control is being pressed right nowThe active state appears during the press between pointer down and release. A small change in color, depth, or scale confirms that the input was received. It is different from a selected item that stays chosen after the interaction.
When to use it
- Give a button press physical feedback
- Show a menu item while it is being clicked
- Respond to a pointer or key press
- Complete the hover-focus-active state set
When NOT to use it
- Use active styling as the permanent selected state
- Scale a control so far that the layout jumps
- Remove all feedback during a press
- Make the pressed state look disabled
Anatomy
Button👇 Press instantlyButton
How it looks when nothing is pressed
The instant between pointer-down and release
scale .97 or a darker color — the feeling of “it registered”
Variants
Scale
ButtonButton
The standard press feedback for buttons
Darken
ButtonButton
The fallback when scaling isn't an option
Inset
Button
Physical feel for toggles and levers
Typical use cases
Button press
Order Total¥ 199.00
On press: scale(.97) + darker color — you can feel the click
Navigation item
List item press: darker background + slight sink
Icon control
Me
Favorites
Messages
Settings
Card action
⏮
▶
⏭
Icon button press: shrinks with a ripple
Further reading