Button Design
Designing the appearance, hierarchy, states and labels of buttons so people can tell what is clickable and which action matters most.
UI ComponentsButton design is mostly hierarchy. Three levels — primary, secondary, tertiary — are enough for almost every product, and the rule that matters is one primary per view. Two primaries is not emphasis, it is a coin flip; the screen stops telling anyone what it wants them to do. Destructive actions are a separate axis, not a fourth level, and should never be the visual default on a screen where the safe path is more common.
Labels should name the outcome, not the mechanism. “Save changes” beats “Submit”, and “Delete 12 invoices” beats “Confirm”, because the label is frequently the only thing read before clicking. States are the other half: default, hover, focus, active, disabled and loading. Disabled buttons with no explanation are a dead end — either say what would enable it, or let the click happen and explain what is missing.
Size, spacing and the fat-finger tax
Roughly 44px is the practical minimum touch target. Destructive actions should not sit flush against the action people take most often; a few pixels of separation prevents a class of mistake that no confirmation dialog fully catches.
In practice
A dashboard placed “Cancel subscription” directly beside “Update payment method”, both secondary and the same size. Accidental cancellations ran about 2% of visits to the page. Separating them, moving cancel to a tertiary style and adding an undo window cut it to near zero — the confirmation dialog they had tried first had changed nothing.
Where teams get it wrong
- More than one primary button on a screen.
- Vague labels — “Submit”, “OK”, “Confirm” — where the outcome could be named.
- Disabled buttons with no explanation of what would enable them.
- Destructive actions adjacent to frequent ones, in the same weight.
- Focus states removed for aesthetics, which breaks keyboard use.
Learn more
You may ask
Frequently Asked Questions
How many button styles does a product need?
Three levels — primary, secondary, tertiary — plus a destructive treatment. More than that and neither designers nor engineers can consistently say which to use, so the hierarchy stops meaning anything.
Should disabled buttons be used at all?
Sparingly. A disabled button that does not say what would enable it leaves people stuck. Often it is better to keep the button active and explain what is missing when it is pressed.
Related terms
All terms- LinkThe control that navigates somewhere — distinct from a button, which performs an action, and confused with one in most products.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
- Modal DesignDesigning dialogs that block the page to demand a decision — when one is justified, what it must contain, and how a person gets out.
- Design SystemThe single source of truth for how a product looks and behaves: tokens, components, patterns, usage rules and the process for changing them.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us