State
Active / Pressed
Active is the fleeting state an element shows only while you are pressing it, giving instant feedback that your action registered.
Definition
Active is the fleeting state that lasts only while the user is actually holding an element down. The moment you click a button, it might shrink a touch, darken by a shade, or flatten its shadow so it genuinely feels pushed in. It's the screen imitating the physical sensation of a real button sinking under your fingertip. If hover is the preview that hints something is about to happen, active is the immediate answer to the fact that your finger is pressing down right now. The element springs back to its original look the instant you let go, which makes active the shortest, most momentary of the three states.
Why does it matter?
People expect some kind of reaction whenever they press something. If the screen doesn't budge at all, they can't tell whether the press registered or the whole thing froze, so they end up tapping the same spot two or three more times. That brief flicker of doubt quietly erodes trust in the entire interface. When the element gives back a small pressed reaction, though, the user instantly relaxes, confident their action clearly got through. That immediate confirmation adds the tactile satisfaction that makes a click feel good, and it leaves the impression that every interaction is precise and deliberate. This matters most when the network is slow and the real result arrives a beat late — the press reaction fills that gap and keeps the user engaged. That's exactly why the same button can feel finished or unfinished depending on whether it responds to being pressed.
Common mistakes
- Skipping the press reaction entirely. When there's a hover effect but nothing happens the moment you click, users can't tell it registered — especially when processing lags — so they anxiously mash the same button over and over.
- Making the pressed effect too dramatic. Dropping the size sharply or flipping the color abruptly makes the click feel clunky instead of crisp, and the whole control ends up looking unstable.
- Adding the press reaction but forgetting the actual result. When it feels pressed yet nothing actually happens, users believe they got a response and then feel betrayed when the interface goes nowhere.
Practical tips
- Keep the shrink subtle — scaling to about 0.96 or 0.97 is plenty. A reduction small enough that you barely notice it produces the most natural, satisfying click.
- Pair the pressed state change with a very short transition. When the value eases in smoothly instead of snapping, the response feels soft and responsive under your fingertip rather than rigid.
- Hover, active, and focus can overlap, so decide their priority up front. The active reaction should read most clearly at the moment of pressing, so users can confirm their action — which also keeps the states from tangling into something that looks awkward.