Define clear visual states for interactive elements (hover, active, disabled, focused) to communicate usability.
Interactive elements are a conversation. States are the language of that conversation. They tell users what is possible (Default), what is about to happen (Hover), what is happening (Active), and what is not possible (Disabled). Without clear states, an interface feels broken or unresponsive.
Interact with the elements or use the toggles to simulate specific states.
Indicates an element is interactive when the mouse moves over it. Not applicable on touch devices.
The moment an element is clicked or tapped. Provides immediate tactile feedback.
Crucial for keyboard navigation. Highlights the element currently selected for input.
Indicates an element exists but cannot be interacted with currently. Often lower contrast.
Never remove the default focus outline without replacing it with a custom, visible alternative.
Use consistent visual changes (e.g., darkening color) for similar states across components.
Ensure disabled states are clearly distinguishable but still legible.