button-states

# Button and Interactive Element States Every interactive component must have a complete, visually distinct state for each interaction mode. Missing or ambiguous states make the UI feel unfinished and reduce user confidence. ## The Six States | State | Trigger | Visual signal | |---|---|---| | **Rest** | Default | Base colour, cursor: pointer | | **Hover** | Mouse over | Slightly darker, subtle background shift | | **Active / Pressed** | Mouse down / tap | Noticeably darker, slight scale-down | | **Focus** | Keyboard navigation | Visible focus ring, no change to fill | | **Disabled** | Not available | Low contrast, cursor: not-allowed, no interaction | | **Loading** | Async action in progress | Spinner or pulse, non-interactive | ## Deriving State Colours Algorithmically State colours are not chosen independently — they are derived from the base colour by adjusting lightness in HSL. This guarantees coherence across the entire palette. ``` base: hsl(H, S%, L%) hover: hsl(H, S%, L% - 8%) ← darken 8% active: hsl(H, S%, L% - 14%) ← darken 14% ``` ### Example: primary button `#635BFF` (hsl 243, 100%, 68%) ```css .btn-primary { background: hsl(243, 100%, 68%); /* rest #635BFF */ } .btn-primary:hover { background: hsl(243, 100%, 60%); /* hover #4A40FF */ } .btn-primary:active { background: hsl(243, 100%, 54%); /* active #3429FF */ } ``` For light buttons on dark backgrounds, invert the logic — lighten on hover instead of darkening...