Button (legacy)

Caution

Legacy buttons will soon be deprecated. Please use the new button, icon button, link button, or link icon button. Migrate from legacy buttons using our codemod.

View the migration guide

Examples Code Usage Migration guide Changelog

Default

The default form of a button, used for most cases. They are not impactful enough to represent the primary action in a container.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonDefaultExample = () => {
	return <Button>Default button</Button>;
};

export default ButtonDefaultExample;

Appearance

Primary

Use a primary button to call attention to an action on a form or to highlight the strongest call to action on a page. Primary buttons should only appear once per container (not including the application header or in a modal dialog). Not every screen requires a primary button.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonPrimaryExample = () => {
	return <Button appearance="primary">Primary button</Button>;
};

export default ButtonPrimaryExample;

Subtle

Use a subtle button with a primary button for secondary actions, such as “Cancel".

import React from 'react';

import Button from '@atlaskit/button';

const ButtonSubtleExample = () => {
	return <Button appearance="subtle">Subtle button</Button>;
};

export default ButtonSubtleExample;

Link

Use a link button to navigate to another page. These should open in the same window unless information may be lost (for example, when someone is filling out a form), or when the destination is an external site (for example, a knowledge base article).

import React from 'react';

import Button from '@atlaskit/button';

const ButtonLinkExample = () => {
	return <Button appearance="link">Link button</Button>;
};

export default ButtonLinkExample;

Subtle link

Similar to a subtle button, but behaves like a link button. Use subtle link buttons with caution. Because there isn't any color or other visual affordance built in, this style relies on the context around it to show that it can be interacted with.

This can make subtle link buttons less accessible than other link buttons. Make sure designs have clear visual affordances for interactive areas and elements.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonSubtleLinkExample = () => {
	return <Button appearance="subtle-link">Subtle link button</Button>;
};

export default ButtonSubtleLinkExample;

Warning

A warning button appears before we request the user to take action, usually in anticipation of a significant change. These are found mostly in confirmation modals.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonWarningExample = () => {
	return <Button appearance="warning">Warning button</Button>;
};

export default ButtonWarningExample;

Danger

The danger button appears as a final confirmation for a destructive action such as deleting. These are found mostly in confirmation modals.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonDangerExample = () => {
	return <Button appearance="danger">Danger button</Button>;
};

export default ButtonDangerExample;

States

Disabled

Set isDisabled to disable a button that isn’t usable. Disabled buttons can cause accessibility issues as disabled elements are not in the tab order so wherever possible we recommend avoid using isDisabled, especially for form submissions.

You should never put a tooltip on a disabled button. For more information see our usage guidelines.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonDisabledExample = () => {
	return (
		<Button appearance="primary" isDisabled>
			Disabled button
		</Button>
	);
};

export default ButtonDisabledExample;

Selected

Set isSelected to indicate the button is selected.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonSelectedExample = () => {
	return <Button isSelected>Selected button</Button>;
};

export default ButtonSelectedExample;

Loading

Set isLoading to indicate the button is loading. The button text is hidden and a spinner is shown in its place, while maintaining the width that it would have if the text were visible.

import React from 'react';

import { LoadingButton } from '@atlaskit/button';

const ButtonLoadingExample = () => {
	return (
		<LoadingButton appearance="primary" isLoading>
			Loading button
		</LoadingButton>
	);
};

export default ButtonLoadingExample;

Spacing

Buttons can have various spacing. Default spacing is used for most use cases, compact for tables and none for breadcrumbs.

import React from 'react';

import Button, { ButtonGroup } from '@atlaskit/button';

const ButtonPaddingExample = () => {
	return (
		<ButtonGroup>
			<Button appearance="primary">Default</Button>
			<Button appearance="primary" spacing="compact">
				Compact
			</Button>
			<Button spacing="none" appearance="subtle-link">
				None
			</Button>
		</ButtonGroup>
	);
};

export default ButtonPaddingExample;

Full width

Buttons can be expanded to full width to fill its parent container.

import React from 'react';

import Button from '@atlaskit/button';

const ButtonFullWidthExample = () => {
	return (
		<Button shouldFitContainer appearance="primary">
			Full width button
		</Button>
	);
};

export default ButtonFullWidthExample;

Button with icon

Buttons may include an icon before or after the text. Omit the text to use an icon button.

Icon before

Display an icon before the text.

import React from 'react';

import Button from '@atlaskit/button';
import StarStarredIcon from '@atlaskit/icon/glyph/star-filled';

const ButtonIconBeforeExample = () => {
	return (
		<Button iconBefore={<StarStarredIcon label="" size="medium" />} appearance="primary">
			Icon before
		</Button>
	);
};

export default ButtonIconBeforeExample;

Icon after

Display an icon after the text.

import React from 'react';

import Button from '@atlaskit/button';
import StarStarredIcon from '@atlaskit/icon/glyph/star-filled';

const ButtonIconAfterExample = () => {
	return (
		<Button iconAfter={<StarStarredIcon label="" size="medium" />} appearance="primary">
			Icon after
		</Button>
	);
};

export default ButtonIconAfterExample;

Icon only

Display an icon-only button.

import React from 'react';

import Button from '@atlaskit/button';
import StarStarredIcon from '@atlaskit/icon/glyph/star-filled';

const ButtonWithIconOnlyExample = () => {
	return (
		<Button
			iconAfter={<StarStarredIcon label="" size="medium" />}
			appearance="primary"
			aria-label="Unstar this page"
		/>
	);
};

export default ButtonWithIconOnlyExample;

Routing

Button's component prop allows a custom React component or HTML element to render in place of a <button> or <a> element.

This is useful for using Button with the <Link> component from popular routing libraries.

import Link from '@popular/routing-library';
import Button from '@atlaskit/button';

// Set a custom component
<PrimaryButton component={Link}>Your Work</PrimaryButton>;

Custom theme button

Avoid using this component. It is intended for deprecation when our alternative, bounded and performant solution is ready. It exists for those already using custom theming, which is hard to use and has performance issues.

Latest versions of button use design tokens. These have theming and dark mode support built in.

import { CustomThemeButton } from '@atlaskit/button';

Was this page helpful?

We use this feedback to improve our documentation.

Forms and input

Images and icons

Layout and structure

Loading

Messaging

Navigation

Overlays and layering

Primitives

Status indicators

Text and data display

Libraries

Tooling

Button (legacy)

Caution

Default

Appearance

Primary

Subtle

Link

Subtle link

Warning

Danger

States

Disabled

Selected

Loading

Spacing

Full width

Button with icon

Icon before

Icon after

Icon only

Routing

Custom theme button

Was this page helpful?