Link icon button

An icon-only button that helps people navigate to a common link or page location.

Default

For buttons that are links for navigation rather than on-page actions. Link icon buttons render an <a> tag instead of a <button>. They accept anchor tag HTML attributes, including href.

View help

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';

const LinkIconButtonDefaultExample = (): React.JSX.Element => {
	return (
		<LinkIconButton href="https://atlassian.com" icon={QuestionCircleIcon} label="View help" />
	);
};

export default LinkIconButtonDefaultExample;

Routing

When available, link icon button will consume the router link component configured in the app provider. This allows router links to be configured once across an entire application. (This replaces the component prop).

These links won't use the configured router link component when passed to href, and instead render a standard <a> tag:

External links
Non-HTTP-based links (mailto:, tel:, sms:)
Anchor / hash links (#)

If your application doesn't have an existing app provider or routerLinkComponent configuration, see how to set this up in the app provider documentation.

Tooltips

Tooltips are currently disabled by default. They will be enabled by default in a later release. Prefer using built-in tooltips over wrapping the link icon button manually.

Set isTooltipDisabled to false to enable the tooltip. The value of label will be used for the tooltip content.

View profile

Use the tooltip prop to override the default tooltip props. It accepts all tooptip props, excluding children.

View profile

Appearance

Primary

A primary button calls attention to the most important action on a page or in an area. Primary icon buttons aren't common because critical actions should typically use a button with a label for clarity.

Add new blog

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import AddIcon from '@atlaskit/icon/core/add';

const LinkIconButtonPrimaryExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			icon={AddIcon}
			label="Add new blog"
			appearance="primary"
		/>
	);
};

export default LinkIconButtonPrimaryExample;

Subtle

Use a subtle icon button for secondary actions.

View settings

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import SettingsIcon from '@atlaskit/icon/core/settings';

const LinkIconButtonSubtleExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			appearance="subtle"
			icon={SettingsIcon}
			label="View settings"
		/>
	);
};

export default LinkIconButtonSubtleExample;

Spacing

Icon button spacing depends on the surrounding UI. Default spacing is used for most use cases and compact for tables or smaller spaces.

View help View help

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';
import { Inline } from '@atlaskit/primitives/compiled';

const LinkIconButtonSpacingExample = (): React.JSX.Element => {
	return (
		<Inline space="space.200">
			<LinkIconButton href="https://atlassian.com" icon={QuestionCircleIcon} label="View help" />
			<LinkIconButton
				href="https://atlassian.com"
				icon={QuestionCircleIcon}
				spacing="compact"
				label="View help"
			/>
		</Inline>
	);
};

export default LinkIconButtonSpacingExample;

Shape

Circle

Only use circle icon buttons in the top navigation or other areas that already have circular buttons.

View help

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';

const LinkIconButtonCircleExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			shape="circle"
			icon={QuestionCircleIcon}
			label="View help"
		/>
	);
};

export default LinkIconButtonCircleExample;

Overriding icon props

Use the icon render prop to override the default icon props.

Learn about new features

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import CompassIcon from '@atlaskit/icon/core/compass';
import { token } from '@atlaskit/tokens';

const LinkIconButtonOverridesExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			appearance="subtle"
			icon={(iconProps) => <CompassIcon {...iconProps} color={token('color.icon.discovery')} />}
			label="Learn about new features"
		/>
	);
};

export default LinkIconButtonOverridesExample;

Advanced href usage with TypeScript

Link button accepts a generic type containing the configured router link's props. This is only required for advanced usage to allow an object to be passed to href.

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import PersonAvatarIcon from '@atlaskit/icon/core/person-avatar';

type MyRouterLinkConfig = {
	to: string;
	replace?: boolean;
};

const LinkIconButtonWithRoutingExample = (): React.JSX.Element => {
	return (
		<LinkIconButton<MyRouterLinkConfig>
			href={{
				to: '/profile',
				replace: true,
			}}
			icon={PersonAvatarIcon}
			label="View profile"
		/>
	);
};

export default LinkIconButtonWithRoutingExample;

States

Disabled

The disabled HTML attribute does not exist for anchor <a> tags, so link buttons are disabled using this accessible technique:

Adds aria-disabled="true"
Adds role="link"
Removes href attribute

View profile

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import QuestionCircleIcon from '@atlaskit/icon/core/question-circle';

const LinkIconButtonDisabledExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			appearance="subtle"
			icon={QuestionCircleIcon}
			label="View profile"
			isDisabled
		/>
	);
};

export default LinkIconButtonDisabledExample;

Selected

Set isSelected to indicate the button is selected.

View pull requests

import React from 'react';

import LinkIconButton from '@atlaskit/button/icon/link';
import PullRequestIcon from '@atlaskit/icon/core/pull-request';

const LinkIconButtonSelectedExample = (): React.JSX.Element => {
	return (
		<LinkIconButton
			href="https://atlassian.com"
			icon={PullRequestIcon}
			label="View pull requests"
			isSelected
		/>
	);
};

export default LinkIconButtonSelectedExample;

Was this page helpful?

We use this feedback to improve our documentation.

Link icon button

Default

Routing

Tooltips

Overriding tooltip props

Appearance

Primary

Subtle

Spacing

Shape

Circle

Overriding icon props

Advanced href usage with TypeScript

States

Disabled

Selected

Was this page helpful?