What is a pressed state in UX design?
A pressed state is the persistent visual treatment applied to a toggle button or control to indicate that it is currently in its activated or engaged position. It is the button equivalent of a toggle switch in the on position, applied to button-shaped controls. Pressed states appear in text formatting toolbars where bold, italic, or underline buttons show whether formatting is currently active, in filter controls where active filters appear pressed, and in any button that controls a persistent on-or-off state rather than triggering a one-time action. The ARIA attribute aria-pressed communicates this state to screen readers.
How does a pressed state differ from a selected state?
Both pressed and selected states are persistent, but they communicate different interaction models. A selected state applies to one item chosen from a set, such as the active tab in a tab bar, where exactly one item is selected at a time. A pressed state applies to a toggle control that can be independently on or off, such as a bold button that can be active or inactive regardless of the state of other buttons. In a group of toggle buttons, multiple buttons can be in a pressed state simultaneously, while in a selection group, typically only one item is selected at a time.
How should pressed states be visually designed?
Pressed states should be visually distinct from the default unpressed state and from the transient active state that occurs during the moment of pressing. A common approach is to invert the button's visual treatment: a button with a light background and dark text in its default state might use a dark background and light text in its pressed state. The visual design should clearly communicate that the control is in a different persistent mode, not simply being hovered over. Ensuring sufficient color contrast for both the pressed and unpressed states is required for accessibility.