Pattern library / Fictional demo
Actions and buttons
Compare primary, secondary, danger, loading and icon actions.
Live specimen
Intent & hierarchy
Size & state
Design notes
One primary action per decision.
Buttons use clear verbs and a 40px minimum interactive height. Disabled states remain visibly distinct. Icons reinforce the label and never replace an accessible name.
Explore the system
Browser demo · Changes stay on this device. No bookings, payments or emails are sent to a real club.