Link button
A button for navigation and URL changes.Usage
Link buttons open new pages, websites, or new locations on a page. These are buttons that behave like links. For actions that only affect the current page, use a regular button.
Parts
Buttons typically have a label and can include an icon before or after the label.
- Label: Text describing the link. Clearly describe where the link navigates or it's purpose, and follow the button label content guidelines.
- Button: The selectable area of the link button.
- Icon (optional): Most buttons don’t need an icon. Use an icon to add additional affordance where the icon has a clear and well-established meaning.
If you need a button that changes the page location, opens an email client, or otherwise links to somewhere, consider whether you could use a link in your design instead:
- Buttons are typically for on-page actions, such as opening a modal.
- Links are for changing locations or page URLs in some way.
If a button is better suited to your design, use a link button. This ensures people using assistive technologies can interact with the link as expected.
Accessibility
Avoid disabling elements like buttons and links. Instead, use validation and errors to explain what needs to be done to proceed.
Disabled elements don’t explain why they're unusable. They also aren’t reachable in the tab order and don’t receive hover, focus, or click events, making them entirely inaccessible to some people.
Never put tooltips on disabled elements
Tooltips can't be reached on all devices or by some assitive technologies, and they should never appear on elements that aren't interactive.
Best practices
Alignment and positioning
In general, the primary button placement should match the alignment of the button group. For example, right aligned button groups place the primary button on the right. Left aligned button groups place the primary button on the left.
- Right align buttons for focussed tasks, series of tasks (such as onboarding), and modal dialogs. Right aligning buttons is best for experiences with less copy, so users end scanning on the most important action (following a Z-pattern).
- Left align buttons for single-page forms and other full-page tasks where there is a lot of content in view. This aligns with how people scan full pages with more content (F-pattern), sorting by importance from left to right. Cards can also left-align the primary action, as they’re typically part of a larger page experience.
- Exceptions: Benefits modals and login forms currently center align buttons.
Do
Right-align buttons for focussed tasks, modal dialogs, and other areas with less content.
Do
Left align buttons on full-page forms, long lists of cards, or other screens with a lot of full-page content.
Content guidelines
Use sentence case capitalization
Only capitalize the first letter of the button and any proper nouns. Most feature names aren’t capitalized or considered proper nouns when following our capitalization guidance.
Keep labels short and free of punctuation. Drop unnecessary articles, such as ‘a’ or ‘the’, for a more concise label.
Use specific labels wherever possible
Start with the verb and specify what is being acted on. Use dynamic text to make the button very specific if possible.
For example, if a button is part of a larger modal, use the same language in the button as in headings and other related text.
- For more best practices, follow all general button usage guidelines.
- For icon-only link buttons, use link icon button.