Frontend

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.

Also called:active

List items press too Hold to see the sink (scale .96), release to bounce back; the right button lacks active and feels dead

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

Account & Security›

Notifications›

Privacy›

List item press: darker background + slight sink

Icon control

Favorites

Messages

Settings

Card action

⏮ ▶ ⏭

Icon button press: shrinks with a ripple