Button
Allows a interaction focal point for an action a user can take. Users can do things with buttons. Take a next step. Confirm actions. They are styled links to attract users and drive them in a specific action.
Structure
- Container: Wraps the content, and allows for a colour style/s to be added.
- Text: Conveys the action message relevant to the button.
- Icon (optional): Supports or directly communicates the text, can be left or right aligned.
- Spinner: Spinner loading icon as an indication for progressive action. Should be left aligned and not used in conjuntion with icons.
Primary button
Guidelines
When to use
- A button element is used to indicate an action.
When not to use
- When you have many actions at once—use a button link.
- You want to offer a less important action—use a button link.
- To make text inside paragraphs or lists actionable—use a text link.
Identify the most important actions
If everything looks important, then nothing is important.
— Patrick Lencioni
Users need to be certain of what action to take next. You need to know which actions are the most important within a given section of the user flow.
Once you’ve identified which actions are the most important at the moment, you can indicate importance through size, type, and variation.
Have one primary action
Ideally every screen should have only one button that represents the most important action. It leads the user to the next step.
Avoid disabled buttons
Many designers want to show users that actions will be possible in the future, so they end up using disabled buttons to show potential actions. But such buttons often end up confusing users about what’s possible.
Instead, try to focus on using progressive disclosure to show them only the actions they should take right at the moment. Then when it’s possible for them to take action, you can show them more buttons. If you need to use a disabled button, always make it clear how users can activate it, such as with a tooltip.
Use actionable text
It should be clear from the button text exactly what happens when the user interacts with it. The labels should be actionable, such as “Add employee(s)” and “Save Report“.
Avoid long explanations in the button text. The text should be short and clear. If additional explanation is needed, add it above the button as text.
If you have a repeated view, use the secondary button for their main action. Primary buttons would offer too many choices to select from.
Buttons with icons
Buttons with icons are great when you need to draw more attention to the action. Icons add additional context and makes the buttons more easy to scan.
But it’s essential to not overuse these buttons. If everything is grabbing attention, things usually get messy.
Use a left icon when the button adds another item
For cases like this, it’s great to use an icon with a plus to represent the addition, such as PlusCircle or EmployeeAdd.
Button with icon
They can help explain what happens when the user interacts with the button. An icon (with an aria-label) makes it easier to know if the user is taken elsewhere.
Button with right icon
Even the simplest icons like plus can be understood in many different ways. To make sure your icon is accessible, add a proper label to communicate the purpose.
Accessibility
Add accessibility requirements and considerations.