Anchor

Use an anchor to make custom links. Anchors help users navigate to another page or sections of a page. They can also download files or provide contact information such as phone numbers or email addresses.

Anchor is based on the HTML <a> tag, with Atlassian focus styles and event tracking built-in. You can customize the anchor's appearance using our styling APIs.

For example, an anchor could be used to make a link card with a larger clickable area than a typical link.

Anchor is meant for custom elements and styles that aren't possible using other components. For standard links or buttons that navigate users to a new location, use link or link button.

Using existing components wherever possible makes Atlassian's UI more visually consistent, and these components are faster to use for most basic use cases.

Anchors are underlined by default. This helps differentiate links from regular text, which is an accessibility requirement. Using color alone to differentiate links isn't accessible, especially if links are surrounded by other text.

Only remove underlines and omit other style affordances such as color if the context surrounding the link makes it clear that it's interactive, such as in navigation or a card layout.

Also, don't underline text that isn't a link. This makes the text look clickable because it looks a link.

For more information see 'Understanding Use of Color (Level A)', (opens new window) and 'Failure of Success Criterion 1.4.1 due to creating links that are not visually evident without color vision', (opens new window).

Anchors are for navigation and URL changes, while buttons are for on-page actions such as form submissions or opening modals. These elements are treated differently by assistive technologies, so avoid using one in place of the other.

More details on when to use links and buttons.

Don't use anchor to make custom actions rather than navigation elements. To build a custom button, use the pressable primitive instead.

Don't link vague words or phrases like “here” or “learn more.” Make sure the linked text clearly describes the purpose of the link for assistive technologies.

Opening links in a new window can be disorienting, (opens new window), so only do it if necessary.

It might make sense for a link to open in a new window if:

As a technique to improve accessibility for links that open in new windows, (opens new window), anchor will automatically provide a visually hidden warning for screen readers.

Make link text size at least 12px. Smaller text is harder to read and interact with.

If anchor is used for non-textual links, ensure the clickable area is at least 24 by 24 pixels for accessibility. For more information see Target Size (Minimum) (Level AA), (opens new window).

Try not to repeat the same link text over and over on a page. Make sure link text is clear about where the link will go.

Always specify if a link triggers a download, and make the linked text clear about what exactly will be downloaded. Include file type and size as well.

Using too many links can overwhelm other, more important information on a page.

Links take people to a new page or location. Be mindful of whether or not the linked resource is helpful or distracting to the current task.

Only link the words that are necessary to clarify where the link goes. Don't link the entire sentence. (Linking smaller phrases can be better for internationalization when sentence structures change across languages.)

Only include the verb in the linked text if it better describes the purpose the link or differentiates it from other links and actions on the page.

For example:

If only Jira was linked, it wouldn't be clear that this was a sign up page.

For standalone links, link the whole phrase. Don't add punctuation.

These type of links typically follow general button or other label content rules (sentence case capitalization, no punctuation, etc.)