Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- To trigger an event or perform an in-page action, e.g., submitting a form, opening a modal/drawer/dialog, saving changes
When not to use
- When the primary outcome is directing the user to a new location (use a Link instead)
- For navigation to a different page or section, or external pages, like docs or the marketing website (use a Link instead)
Best practices
Don't write Button labels in Sentence case.
Do write concise Button labels. The copy should describe where it will take you. See Writing button microcopy and Writing for the web for further guidelines.
Button labels should not exceed more than a few words or run onto multiple lines.
Do keep the interface focused and straightforward, ideally with only one Primary Button visible at a time.
Avoid too many Buttons on a single page, as this can appear cluttered and make it difficult for users to identify their next steps.
Do place multiple Buttons next to each other, with the Primary Button always to the right (unless there is an overflow menu).
Do place an overflow menu on the right in a group of buttons.
Do show a tooltip on hover for icon-only buttons to help users understand their purpose.
Do use a Button as an overflow menu for a group of related actions.
Do display a disabled Button state when the action cannot be taken. See Disabled due to permissions requirement for further guidelines on user permissions.
If necessary, you can style a Link as a Button by using the Link variant of Button. However, keep in mind the 'Don't' guideline on the right.
Don’t use the Link variant of Button for external links.
The only current exception is for links to the Control Centre, such as “Manage Subscription” on the License Usage Dashboard.