Icon button

An icon-only button lets people take a common and recognizable action where space is limited.

Default

The default icon button, used for most cases. They aren't impactful enough to represent a primary action.

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import EditIcon from '@atlaskit/icon/core/edit';

const IconButtonDefaultExample = (): React.JSX.Element => {
	return <IconButton icon={EditIcon} label="Edit" />;
};

export default IconButtonDefaultExample;

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 icon button manually.

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

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

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.

import React from 'react';

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

const IconButtonPrimaryExample = (): React.JSX.Element => {
	return <IconButton appearance="primary" icon={AddIcon} label="Create page" />;
};

export default IconButtonPrimaryExample;

Subtle

Use a subtle icon button for secondary actions.

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import LinkIcon from '@atlaskit/icon/core/link';

const IconButtonSubtleExample = (): React.JSX.Element => {
	return <IconButton appearance="subtle" icon={LinkIcon} label="Copy link" />;
};

export default IconButtonSubtleExample;

Rovo

Use the rovo icon button for primary Rovo actions such as "send" in Prompt boxes.

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';

const IconButtonRovoExample = (): React.JSX.Element => {
	return <IconButton appearance="rovo" icon={ArrowUpIcon} label="Ask Rovo" />;
};

export default IconButtonRovoExample;

Spacing

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

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import MoreIcon from '@atlaskit/icon/core/show-more-horizontal';
import { Inline } from '@atlaskit/primitives/compiled';

const IconButtonSpacingExample = (): React.JSX.Element => {
	return (
		<Inline space="space.200">
			<IconButton icon={MoreIcon} appearance="primary" label="More actions" />
			<IconButton icon={MoreIcon} appearance="primary" spacing="compact" label="More actions" />
		</Inline>
	);
};

export default IconButtonSpacingExample;

Shape

Circle

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

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';

const IconButtonCircleExample = (): React.JSX.Element => {
	return <IconButton shape="circle" icon={ShowMoreHorizontalIcon} label="More actions" />;
};

export default IconButtonCircleExample;

Overriding icon props

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

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import StarStarredIcon from '@atlaskit/icon/core/star-starred';
import { token } from '@atlaskit/tokens';

const IconButtonIconOverridesExample = (): React.JSX.Element => {
	return (
		<IconButton
			icon={(iconProps) => (
				<StarStarredIcon {...iconProps} color={token('color.icon.accent.orange')} />
			)}
			label="Add to favorites"
		/>
	);
};

export default IconButtonIconOverridesExample;

States

Disabled

Set isDisabled to disable an icon button that shouldn't be actionable. The icon button will appear faded and won't respond to user interaction.

Avoid disabling buttons because this can cause accessibility problems, and never put a tooltip on a disabled button.

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import EditIcon from '@atlaskit/icon/core/edit';

const IconButtonDisabledExample = (): React.JSX.Element => {
	return <IconButton isDisabled icon={EditIcon} label="Edit" />;
};

export default IconButtonDisabledExample;

Selected

Set isSelected to indicate the button is selected.

import React from 'react';

import IconButton from '@atlaskit/button/icon/button';
import ShowMoreHorizontalIcon from '@atlaskit/icon/core/show-more-horizontal';

const IconButtonSelectedExample = (): React.JSX.Element => {
	return <IconButton isSelected icon={ShowMoreHorizontalIcon} label="More actions" />;
};

export default IconButtonSelectedExample;

Loading

When a button is still loading and not actionable, a loading spinner can be displayed in place of the icon. This also disables the button and blocks user interaction.

Enable loading state

import React, { useCallback, useState } from 'react';

import IconButton from '@atlaskit/button/icon/button';
import EditIcon from '@atlaskit/icon/core/edit';
import { Inline, Stack } from '@atlaskit/primitives/compiled';
import Toggle from '@atlaskit/toggle';

const IconButtonLoadingExample = (): React.JSX.Element => {
	const [isLoading, setIsLoading] = useState(true);

	const toggleLoading = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
		setIsLoading(event.currentTarget.checked);
	}, []);

	return (
		<Stack space="space.200" alignInline="start">
			<Inline alignBlock="center">
				<Toggle isChecked={isLoading} id="enable-loading" onChange={toggleLoading} />
				<label htmlFor="show-overlay">Enable loading state</label>
			</Inline>
			<IconButton isLoading={isLoading} icon={EditIcon} label="Edit" />
		</Stack>
	);
};

export default IconButtonLoadingExample;

Was this page helpful?

We use this feedback to improve our documentation.