Every State of a Button

Why states matter

AI agents usually design the normal state and forget the rest. The button looks fine in a screenshot. Then a real person uses it:

• they press Tab and cannot see where they are;
• they click "Pay" twice because nothing showed it was working;
• a grey button looks disabled, but it is not.

States tell people what is happening. Without them, the interface feels broken even when the code works.

The eight states

1. Default

How the button looks when nothing is happening.

• Clear label that says what happens: "Save changes", not "OK".
• Enough contrast between text and background.

2. Hover

The mouse is over the button. Only on computers; phones have no hover.

• A small change: slightly darker or lighter color, or a soft shadow.
• Never put important information only in the hover state. Phone users will never see it.

3. Focus

The button was selected with the keyboard (Tab key). This is the most forgotten state.

• A clear ring or outline around the button, at least 2 pixels, in a color that stands out.
• Do not remove the focus ring because "it looks ugly". Keyboard users need it to know where they are.

4. Pressed (active)

The mouse button or finger is down.

• A quick, small change: slightly darker, or a tiny shrink (around 97%).
• This is what makes a button feel "real" on touch screens.

5. Disabled

The button cannot be used right now.

• Lower contrast, and the mouse pointer does not change to a hand.
• Tell people why it is disabled when possible, for example a short note: "Fill in your email to continue."

6. Loading

The action started, and the person must wait.

• Show a small spinner or change the label, for example "Saving...".
• The button cannot be clicked again while loading. This stops double payments and double messages.
• Keep the button the same width, so the layout does not jump.

7. Success

The action worked.

• A short change: a check mark or "Saved", for one or two seconds.
• Then go back to default, or move the person to the next step.

8. Error

The action failed.

• Say what went wrong near the button, in plain words: "Could not save. Check your connection and try again."
• Use text or an icon, not only red color.
• The button becomes usable again so the person can retry.

Light and dark backgrounds

Check every state on both. Common problems:

• the focus ring is invisible on a dark background;
• the disabled button looks the same as the default one on a light background;
• the hover color is too close to the background.

Types of buttons

Most products need three types. Each type needs all eight states.

• Primary: the main action. One per screen. Filled with your accent color.
• Secondary: other actions. Outline or light fill.
• Text or ghost: less important actions, like "Cancel". Only text.

Ask your agent for all states

Copy this request:

Create our button component with three types: primary, secondary and text.
Each type needs these states:
- default
- hover (computers only, small color change)
- focus (visible 2-pixel ring, works on light and dark backgrounds)
- pressed (slightly darker, quick)
- disabled (lower contrast, no hand cursor)
- loading (spinner + label like "Saving...", cannot be clicked again, same width)
- success (check mark for 2 seconds, then back to default)
- error (message near the button, text not only color, button usable again)

Make a test page that shows every type in every state, on a light and a dark
background. Do not use this button anywhere else yet.

How to test it yourself

1. Mouse: move over each button, press and release.
2. Keyboard: press Tab to move between buttons. Can you always see where you are? Does Enter or Space press the button?
3. Phone: tap each button. Do you see the pressed state? Is it big enough to tap easily (about 44 by 44 pixels)?
4. Loading: click a loading button many times fast. Does the action happen only once?
5. Dark and light: check the test page on both backgrounds.

Check before you finish

• All eight states exist for every button type.
• Focus is visible on light and dark backgrounds.
• Loading prevents double clicks.
• Errors use text, not only color.
• Nothing important appears only on hover.