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, c…