Button

Use default buttons for most actions that aren't the main call to action for a page or area. Default buttons are less prominent than primary buttons.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonDefaultExample;

Use a primary button to call attention to a form submission or to highlight the most important call to action on a page. Primary buttons should only appear once per area, but not every screen needs a primary button.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonPrimaryExample;

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

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonSubtleExample;

Warning buttons confirm actions that may cause a significant change or a loss of data.

Warnings alert people of a problem that might happen if they proceed. These appearances are often used in confirmation modals.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonWarningExample;

A danger button appears as a final confirmation for a destructive and irreversible action, such as deleting.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonDangerExample;

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

const ButtonDiscoveryExample = () => {
	return <Button appearance="discovery">Discovery button</Button>;
};

export default ButtonDiscoveryExample;

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

Disabled buttons can cause accessibility issues (disabled elements are not in the tab order) so wherever possible, avoid using isDisabled. Instead, use validation or other techniques to show users how to proceed.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonDisabledExample;

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonSelectedExample;

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

Dark theme

Enable loading state

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

import Button from '@atlaskit/button/new';
import { Inline, Stack } from '@atlaskit/primitives';
import Toggle from '@atlaskit/toggle';

const ButtonLoadingExample = () => {
	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>
			<Button isLoading={isLoading}>Button</Button>
		</Stack>
	);
};

export default ButtonLoadingExample;

Button spacing depends on the surrounding UI. Default spacing is used for most use cases, compact for tables.

Dark theme

import React from 'react';

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

const ButtonSpacingExample = () => {
	return (
		<ButtonGroup>
			<Button appearance="primary">Default</Button>
			<Button appearance="primary" spacing="compact">
				Compact
			</Button>
		</ButtonGroup>
	);
};

export default ButtonSpacingExample;

Buttons can expand to full width to fill the parent container. This is sometimes done in login forms. Follow the alignment guidance for more options.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';

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

export default ButtonFullWidthExample;

Buttons may include an icon before or after the text label. For an icon-only button, see icon button.

Dark theme

import React from 'react';

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

const ButtonIconBeforeExample = () => {
	return (
		<Button iconBefore={StarFilledIcon} appearance="primary">
			Icon before
		</Button>
	);
};

export default ButtonIconBeforeExample;

Dark theme

import React from 'react';

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

const ButtonIconAfterExample = () => {
	return (
		<Button iconAfter={StarFilledIcon} appearance="primary">
			Icon after
		</Button>
	);
};

export default ButtonIconAfterExample;

Use the iconBefore or iconAfter render prop to override the default icon props.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';
import LinkIcon from '@atlaskit/icon/glyph/link';

const ButtonIconBeforeSizeExample = () => {
	return (
		<Button
			iconBefore={(iconProps) => <LinkIcon {...iconProps} size="small" />}
			appearance="warning"
		>
			Icon with size override
		</Button>
	);
};

export default ButtonIconBeforeSizeExample;

Avoid truncation whenever possible. Make sure there's always a way to access the full content for all users.

Text will truncate when buttons are in a narrow container to prevent wrapping onto a new line and breaking layouts. An ellipsis will be added to the end to indicate that the text has been truncated.

The truncation is implemented with styles, so screen readers will still read the full text.

Dark theme

import React from 'react';

import Button from '@atlaskit/button/new';
import { Box, xcss } from '@atlaskit/primitives';

const containerStyles = xcss({
	maxWidth: 'size.1000',
});

const ButtonTruncationExample = () => {
	return (
		<Box xcss={containerStyles}>
			<Button>This text is truncated to fit within the container</Button>
		</Box>
	);
};

export default ButtonTruncationExample;

Coming soon

The legacy CustomThemeButton will soon be deprecated. We're working on a replacement for this with safe style overrides using XCSS.

Forms and input

Images and icons

Layout and structure

Loading

Messaging

Navigation

Overlays and layering

Primitives

Status indicators

Text and data display

Libraries

Tooling

Default

Appearance

Primary

Subtle

Warning

Danger

Discovery

States

Disabled

Selected

Loading

Spacing

Full width

Button with icon

Icon before

Icon after

Overriding icon props

Truncation

Custom buttons

Coming soon

Was this page helpful?