Beyond the default appearance.
WHAT STATES EXIST
Default Hover, on devices with a pointer Focus, when reached by keyboard Active, while being pressed Disabled Loading Error Selected
WHY THEY MATTER
An element with only a default state gives no feedback.
WHAT IS MOST OFTEN MISSING
Focus.
WHY THAT MATTERS
Without a visible focus state, keyboard users cannot tell where they are.
WHAT NOT TO DO
Remove the focus indicator because it is visually untidy.
Replace it with something better, never nothing.
WHAT DISABLED STATES MUST DO
Look clearly unavailable Explain why, where possible
THAT SECOND POINT
A disabled button with no explanation is a dead end.
WHAT TO CONSIDER INSTEAD OF DISABLING
Allowing the action and explaining what is missing.
WHAT TO DESIGN FOR LOADING
A state that does not shift the layout when content arrives.
WHAT TO CHECK
Every state, for every interactive element.
