button-states
Installation
SKILL.md
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.