Whether to use a button or a link
Buttons and links behave differently, because they have different purposes:
- Buttons execute actions: showing content on the page that was previously hidden, playing a video, or submitting a form, and so on.
- Links go to destinations: taking the user to a new page, or new section of the current page
Because of their different purposes, buttons and links behave differently in both browsers and screen readers. Some examples include:
- A link points to a specific URL that can be shared, bookmarked, saved in your browser history, and reopened later—but a button doesn't
- Links can be opened in a new tab, buttons can't
- Links have a concept of whether or not they've been visited, buttons don't
- Most browsers show a link's target URL in the bottom-left corner on hover or focus; but don't do that for buttons
- Focused buttons can be activated (i.e. clicked on) with the Space key, or the Enter or Return key; focused links can only be activated with Enter or Return
- Some screen readers collect all links on the page in one section of their interface, and all buttons or form controls in another
Put together, those different purposes, and resulting different behaviors, mean that...
...we might have some work to do.
Icon-only buttons
When to use
Out of a desire to create a simpler user interface, or save space, you might consider using an Icon Button in some part of your designs. But you should consider:
- How likely is it that all of the users of this experience will correctly interpret the function of this button, with only an icon?
- What might be the consequences of misinterpretation? Can the user easily undo whatever the button does? How might their experience be degraded if they ignore the button, because they don't realize what it actually does?
If there's a low risk of misinterpretation, an icon-only button should work just fine.
If you think there's a medium risk of misinterpretation, consider adding a tooltip to the button to provide users with additional context.
If there's a high risk of misinterpretation, consider adding a text label to the button.
Accessibility
Whether or not an icon has a common interpretation, that still depends on users' ability to see it. So for screen reader users, we need to add an aria-label to each icon-only button that will stand in for the icon.
Links with icons
When to use
Both links and buttons can have icons added to the left or the right of the text. But for links, we should use icons to indicate when a link behaves in a non-standard way — in other words, when it doesn't open up a new page in the current tab.
Links to files
Use a document-* icon to indicate that this link points to a file, with the icon specific to that filetype if available. If not, use document.
Links to files will either trigger a download or open the file directly in the browser, depending on the user's browser configuration and the file's type. You can suggest it get treated as a download, but the browser may be set up to respond differently.
Links that open in a new tab
Use the external-link icon on the right to indicate when a link opens in a new tab. Screen reader users in particular will appreciate a heads up on the context shift.
Links to files will either trigger a download or open the file in a new tab, depending on the user's browser configuration and the file's type.
Accessibility
It's important to ensure that screen reader users who won't see the icon attached to your link still get the additional context it provides.
For file downloads, the filetype (if common), plus Download:, can be prefixed to the link text. For external links, append : Opens in a new tab.
Typically this is accomplished using the link's aria-label attribute.
Button groups
Sometimes a single element has multiple possible actions associated with it, meaning there will be a group of buttons.
You should only have one filled button per surface, so that it really stands out. So a button group should only ever have one filled button.
Within a single element (such as a card or list item), we should only ever use one outlined button. Multiple outlined buttons are too noisy, and when grouped with filled or ghost buttons, they don't stand out enough.
So that leaves us with two options for button groups: a filled button, and then ghost buttons; or all ghost buttons, if none of the actions are the primary action for this surface.
If you have more than 3 actions to show, collapse the third one and beyond into an overflow menu.