Design Better Buttons
The do’s and don’ts of button design
This article illustrates better alternatives to bad button design practices to keep in mind when creating a user interface.
Limit one style per button type
All too often, websites and apps use multiple button styles for the same action type. Take inventory of how many buttons styles you use and pair it down to one style per type. Standard button types include: call to action (CTA), primary, secondary, tertiary, success, danger, link, etc.
Include event states and provide visual feedback
Button states like hover, pressed, and in-progress provide needed visual feedback to users. Without event states, users might get confused about what is or will happen upon committing an action.
Differentiate button types
Button types should be stylistically differentiated to provide visual cues of their hierarchy. A primary action should be more prominent than a secondary or tertiary action, and design actions that commit irreversible outcomes with extra intention.
Keep button styles consistent
Any design style can work as long as you keep the overall style consistent. If you use a 4px border-radius, subtle gradient and drop shadow, make sure you carry that style to all your button types.
Non-buttons shouldn’t look like buttons
Buttons (especially fully rounded ones) are often styled similarly to tags. If you use both components in your design, make sure to add enough visual difference to prevent confusion. The last thing you want to see is a user rage clicking an element they mistake for an action.
Keep case consistent
Whether you are using all caps, title case, sentence case, or lower case, make sure it is consistent across your different button types.
Know when to use icons
Buttons look bad stacked on top of each other like when presented in each row of a long table. Consider a more subtle visual style—like an icon—for actions in contexts with repeated content of the same kind.
Avoid long labels
Long button or link labels clutter a user interface and force a user to think. Limit an action label to only what is necessary unless the action is unique, complicated, or causes irreversible damage (ie. deleting data).
The label should clearly communicate its action
Don’t leave the user guessing what a button does, especially if it is irreversible. Explain the consequences of the action clearly and concisely. Labels like “yes,” “no,” and “cancel” can be misinterpreted. In the above example, a user could read “cancel” as a confirmation of canceling the location instead of canceling its deletion.
Add padding between links
Don’t overlook link actions. Make sure enough padding is added to them when they appear together outside of copy blocks.
Don’t wrap labels
The wrapping of button labels reduces legibility — it also looks terrible. Make sure to keep text to one line.
Accessibility first
A few basic things to consider:
- Make sure every form field has a <label>
- Use appropriate HTML semantics
- Add role= and ARIA when necessary
For more on creating accessible forms:
It takes hours of research and attention to create content like this article. Please give it a few claps to motivate me to keep writing. It’s free for you but means a lot to me.
For more:
