Design

Buttons: Specs

Updated: Feb 26, 2026

Visual specifications for button states, including default, hover, pressed, and disabled.

States

Default active state
All buttons have a default button state. This is the null-state of a button shown on screen. If the button is not available for interaction, then an inactive button state would exist. See the Inactive State below.

Hover state
When a user scans over a button with their pointer, cursor, or any other input object, the state is called hover. Buttons typically have a designed hover state, different from the default state, to indicate that a button is active and available to the user. This state also acts as a foreshadowing action and instantaneous UI feedback for a user, so they can press or interact with the button with confidence.

Pressed state
This state acts as instantaneous UI feedback to the user, so they know they have interacted with a button element. It should be in effect however long users are pressing — a brief flash with a click, an extended state with a press-and-hold. This state is visually distinct from the default state and hover state.

Disabled state
Disabled button states are used when a button is present but not available for use. Examples of inactive buttons would be when a user needs to first perform an action (or a set of actions) before an inactive button becomes available. This state is typically communicated as less vibrant and therefore not interactive compared to a Default Active Button (above).

Did you find this page helpful?