The when, how, and why to use buttons.
Buttons should be used in situations where users might need to:
- Submit a form
- Begin a new task
- Trigger a new UI element to appear on the page
- Specify a new or next step in a process
Using the design system Button Component will ensure you’re button looks like a button. Applying the appropriate label is also important in making sure the user has a clear understanding of what the action will do.
- Use clear and concise wording.
- Avoid contractions or colloquialisms. Keep the language approachable but not personal.
- Ensure your button label matches the route destination.
The HTML elements for buttons and links (a.k.a. anchors) describe a very specific type of action that is going to be taken when they are used. It is important you know when to use which, as the distinction matters:
- Use a link when you’re navigating to another place, such as: a "view all" page, "Jane Chen" profile, a page "skip link" etc.
- Use buttons when you are performing an action, such as: "submit," "merge," "create new," "upload," etc.
- An action is almost always occurs on the same page
If pressing a Button results in a new URL, or the resultant UI makes sense as "a new browser tab", that is a link <a>. Everything else is a <button>.
The distinction is important to screen reader users to know what's going to happen next. Will I navigate somewhere or will something happen on the page? So it's important to choose the right HTML element for the job.
There are a couple "flavors" of button depending on use case.
Used for key actions on the page. Primary Buttons can also be referred to as “Brand” or “CTA (Call to Action)” and should only be used once per page. All other supporting actions should use Default Button.
Secondary buttons are used to represent calls to action that are either in support of the primary call to action or stand-alone. There can be multiple secondary buttons per page. However, a default button should be used for any navigation-type actions.
This is the default appreance and behavior of button. The majority of buttons on your page should use this form of button. If you are designating a primary call to action, use a primary button. If you are designating a secondary call to action, use a secondary button.
When looking to accent an interaction or for special use cases that require more importance than a default button, the Color Button can be used to support an HPE sub-brand when appropriate or a serious action (ie. using red for a destructive task).
Icons may be incorporated into buttons, either inline with text or as an icon only. When using icon only buttons, the dimension of the clickable area should be kept in mind for its use on mobile devices. Areas too small lead to errant clicks, and as result, poor experience.
A button's visual state may be specified as appropriate in the application's context. For example, using "active" for the current item or "disabled" until a set of criteria are met.
Button label text size may be specified. Padding and rounding scale proportionately to the label size. The default size is medium.