VOCABULARY / ENTRY
Pressed-State Feedback
pressed-state
While a user is pressing or clicking an actionable control (between pointer down and release, matched by :active in CSS), the control immediately shows a visible change, optionally with haptic or audio feedback, confirming that the press was received; the action itself completes on release.
Recognizing it
- The control's fill, shadow, scale, or color changes the instant the pointer or finger goes down
- The change reverts immediately on release or when the pointer leaves the control, leaving no persistent trace
- The pressed style is visually distinguishable from the control's hover, focus, and selected states
Concept boundary
The pressed state only answers whether the system received the press, in the brief window between down and release. It is not hover (pointer resting without pressing), not the focus indicator (where keyboard focus is), and not the selected or toggled state (which persists after release). It also does not show the result of the action; that is the job of a status message or content change.
When to consider it
- Touch interfaces have no hover state, so press feedback is the only signal that the user hit the target
- Buttons, links, or cards have custom styling that overrides the platform's default pressed style
- The action requires a network round trip or lengthy processing, and users may tap again before the result appears
When to be cautious
- Do not let the down-event itself trigger an irreversible action; users then cannot cancel by moving the pointer away
- Do not reuse the selected style for the pressed state; users will assume the toggle already completed
- Do not express the press only through translation or scale animation; under reduced motion the feedback disappears entirely
Tradeoff
Obvious press feedback makes every click feel like it landed, but it can look jarring in an extremely flat or quiet visual system; the compromise is a subtle yet contrast-distinguishable fill or shadow change rather than omitting the state.
Conditional rules · Editorial advice
Related entries
Both are state styles on a control but answer different questions: the focus indicator says where the action will land, the pressed state says the press was received, and they must be distinguishable.
The pressed state only confirms the input was received; the outcome still needs follow-up feedback such as a status message.
Direct manipulation depends on an immediate visible response to every input step, and the pressed state is the first link in that feedback chain.
Once depth cues are removed without adding other press feedback, users cannot confirm whether a click landed.
Sources and what they support
The :active pseudo-class matches an element being activated by the user; with a mouse, activation typically starts when the primary button is pressed and ends on release, it is commonly used on <a> and <button>, and it should follow the LVHA order after other link pseudo-classes.
Retrieved: 2026-09-15 · Archived 2026-09-16WCAG 2.2 SC 2.5.2 (Level A) requires single-pointer functionality to satisfy one of: the down-event executes no part of the function, completion happens on the up-event with a way to abort or undo, the up-event reverses the down-event, or completing on the down-event is essential; the intent is that users can cancel an accidental press by moving the pointer away before release.
Retrieved: 2026-09-15Nielsen states that about 0.1 second is the limit for users to feel the system reacts instantaneously, needing no special feedback beyond displaying the result; about 1 second is the limit for uninterrupted flow of thought; about 10 seconds is the limit for keeping attention on the dialogue.
Retrieved: 2026-09-15 · Archived 2026-09-16The article lists a color change once the user has clicked a button as the simplest form of immediate feedback and holds that immediate feedback on interactive events helps users spot and fix errors quickly; it states no specific time threshold.
Retrieved: 2026-09-15 · Archived 2026-09-16Definitions reference these sources. Digital specimens, selection advice, relationships, and recipes are editorial work and have not been validated through user research.
Type extensions and implementation notes
This entry has no operable specimen yet; the illustration is an editorial sketch. When applied to a product, hold down every control type on a real touch device and with a mouse to verify that press feedback appears immediately, is distinguishable from hover, focus, and selected states, and that releasing outside the control does not trigger the action; re-check under the system's reduced-motion setting.
{
"states": [
"rest",
"hover",
"pressed",
"released"
],
"a11y": [
"Press feedback does not rely on color alone; layer shadow, fill, or border changes on top",
"The action completes on release, and moving off the control before releasing cancels it",
"The pressed state can coexist with the focus indicator and selected state without hiding either"
],
"motion": "Color or inset changes apply instantly on press with no entry delay; scale or translation animation is omitted under reduced motion, keeping only color and shadow changes"
}Open the Agent JSON file for this entryThis file repeats every field of this entry verbatim and adds its sources, archive status, and editorial scope.