Link

A link takes people to a new location in the app or another website.

Examples Usage Code Migration guide Changelog

Link is for use in text. If you need a non-text element to behave like a link, such as a card, use the anchor primitive.

View anchor documentation

Default

The default appearance of a link.

Default link

import React from 'react';

import Link from '@atlaskit/link/link';

export default function Default(): React.JSX.Element {
	return <Link href="https://www.atlassian.com/software/jira">Default link</Link>;
}

Subtle

Use a subtle link if the default link appearance is too prominent. There is no underline in resting state, but one appears on hover.

Ensure the surrounding context makes it clear that the link is interactive, such as in navigation or breadcrumbs. Avoid using subtle links in body copy because they're hard to distinguish from the surrounding text.

Subtle link

import React from 'react';

import Link from '@atlaskit/link/link';

export default function Subtle(): React.JSX.Element {
	return (
		<Link href="https://www.atlassian.com/software/confluence" appearance="subtle">
			Subtle link
		</Link>
	);
}

Inverse

Use an inverse link when displaying it on a bold background.

Inverse link

import React from 'react';

import Link from '@atlaskit/link/link';

export default function Inverse(): React.JSX.Element {
	return (
		<Link href="https://www.atlassian.com/software/confluence" appearance="inverse">
			Inverse link
		</Link>
	);
}

Visited

Links that have been visited will display in a different color. This is not supported for inverse links due to color contrast limitations.

Default link

import React from 'react';

import Link from '@atlaskit/link/link';

export default function Visited(): React.JSX.Element {
	return <Link href="/components/link/examples">Default link</Link>;
}

Links that open in a new window or tab

It's important to indicate when links open in new windows or tabs. An icon will display next to the link, as well as visually hidden text "(opens new window)" for screen reader users.

Opening links in a new window can be disorienting for people, so only do it when necessary. For more information see 'G200: Opening new windows and tabs from a link only when necessary', (opens new window).

Atlassian home, (opens new window)

import React from 'react';

import Link from '@atlaskit/link/link';

export default function NewWindow(): React.JSX.Element {
	return (
		<Link href="https://www.atlassian.com" target="_blank">
			Atlassian home
		</Link>
	);
}

In body text

Links work in body copy, and will wrap onto new lines if necessary.

When setting up a new project, start by reviewing the project configuration guide. Team members can then invite collaborators and set permissions from the project settings page. For advanced configuration, refer to the Confluence space admin documentation, (opens new window) which opens in a new window.

import React from 'react';

import Link from '@atlaskit/link/link';
import { Text } from '@atlaskit/primitives/compiled';

export default function BodyCopy(): React.JSX.Element {
	return (
		<Text>
			When setting up a new project, start by reviewing the{' '}
			<Link href="/components/link/usage">project configuration guide</Link>. Team members can then{' '}
			<Link href="/components/link/usage">invite collaborators</Link> and set permissions from the
			project settings page. For advanced configuration, refer to the{' '}
			<Link href="/components/link/usage" target="_blank">
				Confluence space admin documentation
			</Link>{' '}
			which opens in a new window.
		</Text>
	);
}

Inheriting font styles

Links will inherit font styles of surrounding text.

The link component inherits font styles

import React from 'react';

import Heading from '@atlaskit/heading/heading';
import Link from '@atlaskit/link/link';

export default function FontStyleInheritance(): React.JSX.Element {
	return (
		<Heading size="xxlarge">
			The <Link href="/components/link/code">link component</Link> inherits font styles
		</Heading>
	);
}

HTML attributes

Link passes through all valid HTML attributes to the underlying <a> element.

Loom home, (opens new window)

import React from 'react';

import Link from '@atlaskit/link/link';

export default function HtmlAttributes(): React.JSX.Element {
	return (
		<Link href="https://www.loom.com" rel="noopener noreferrer" target="_blank">
			Loom home
		</Link>
	);
}

Router links

Link supports automatic configuration of router link components through the AppProvider. Here's an example of the router link configuration for the anchor primitive.

Event tracking

Link has utilities to make tracking events easier. Here's an example of tracking events with the anchor primitive.

Was this page helpful?

We use this feedback to improve our documentation.