Link icon button
An icon-only button that helps people navigate to a common link or page location.Usage
Link icon 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 icon button.
Parts
- Button: Most icon buttons should be square, aside from some select round icons that appear in the top navigation.
- Icon: An existing system icon.
- Tooltip: All icon buttons require a clear name for tooltips (and screen readers).
If you need an icon 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 icon button. This ensures people using assistive technologies can interact with the link as expected.
Choose an existing system icon
Don’t use icon-only buttons with custom icons. If you are creating a new icon, it’s probably a more complex idea that would require a link button with a text label.
Use an existing system icon instead.
There are very few icons that have clear and common associations across apps, so use link buttons with text labels where space allows or when the action is very important.
Also consider localization when using icons. Does the icon have a clear meaning that holds up for everyone, including people from different cultures or places?
To test whether an icon button will be clear, apply the five-second rule: if it takes you more than five seconds to think of an appropriate icon, it is unlikely that an icon can effectively communicate that action.
Do
Use an icons with a well-established association to an action in Atlassian and other software products.
Don’t
Don't use one icon to mean many different things, and don't use icons that aren't clear and obvious to most people.
Accessibility
Always include a clear, accessible name as a label
Clearly describe the icon button action in a label for screen readers. Follow the button label content guidance for clear and active labels. The provided label will be rendered as visually hidden content in the button, rather than using aria-label which is not always translated into other languages by translation services.
Avoid disabling buttons and follow all general button accessibility guidance.
Best practices
Follow our iconography guidance and use the line versions of icons for most cases. You can use filled icons to show an action has been taken or selected.
Content guidelines
Use sentence casing for labels
Use sentence case for all button tooltips and labels. This creates consistency for assistive technologies.
Only capitalize the first letter of the button label and any proper nouns. Most feature names aren’t capitalized or considered proper nouns when following our capitalization guidance.
Use specific labels wherever possible
Where possible, specify the object being acted on in the tooltip and label. For example “Edit page” instead of just “Edit”.