Lemma
No. 012

UI Design

Button

A button is a clickable element that triggers an action, such as submitting a form, saving changes, or moving to the next step.

Why it matters

Buttons are how people make things happen in an interface. If a button is hard to find, unclear, or doesn't react to being used, the whole task can stall.

In depth

A well-built button accounts for several states: default, hover, active (being pressed), focus (reached by keyboard), disabled, and loading. Keep only one primary button per view so the main action stays obvious — extra emphasis on everything reads as emphasis on nothing. Use clear, action-oriented labels rather than vague words like 'OK'.

Real-world example

On a checkout screen, a solid 'Place order' button stands out clearly while a quieter 'Back to cart' link sits beside it.

Try it
StateDefault

Hover, click, or tab to the button. Each state needs its own visible signal.

Back to index