Button

A button triggers an event or action. They let users know what will happen next.

Neutral selected states

When the platform-dst-tokens-finesse feature flag is enabled, this component uses the new neutral treatment for selected states.

Examples Code Usage Changelog

Default

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.

import React from 'react';

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

export default function ButtonDefaultExample(): React.JSX.Element {
	return <Button>Default button</Button>;
}

Appearance

Primary

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.

import React from 'react';

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

const ButtonPrimaryExample = (): React.JSX.Element => {
	return <Button appearance="primary">Primary button</Button>;
};

export default ButtonPrimaryExample;

The placement of the primary button typically matches the alignment of the button(s) in the layout. Review usage details for alignment examples.

Subtle

Use a subtle button with a primary button for secondary actions.

Subtle buttons are best used in spaces where it's already clear items can be interacted with, like toolbars or groups of buttons next to each other. Avoid using them in other situations, as they aren't as obviously clickable as other button styles.

import React from 'react';

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

const ButtonSubtleExample = (): React.JSX.Element => {
	return <Button appearance="subtle">Subtle button</Button>;
};

export default ButtonSubtleExample;

Warning

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.

import React from 'react';

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

const ButtonWarningExample = (): React.JSX.Element => {
	return <Button appearance="warning">Warning button</Button>;
};

export default ButtonWarningExample;

Danger

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

import React from 'react';

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

export default function ButtonDangerExample(): React.JSX.Element {
	return <Button appearance="danger">Danger button</Button>;
}

Discovery

A discovery button can be used as the call to action for new experiences.

import React from 'react';

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

const ButtonDiscoveryExample = (): React.JSX.Element => {
	return <Button appearance="discovery">Discovery button</Button>;
};

export default ButtonDiscoveryExample;

Rovo

Use a Rovo button for primary Rovo or AI actions, such as opening Rovo Chat or starting a Rovo-powered workflow.

import React from 'react';

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

const ButtonRovoExample = (): React.JSX.Element => {
	return <Button appearance="rovo">Rovo button</Button>;
};

export default ButtonRovoExample;

States

Disabled

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.

import React from 'react';

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

export default function ButtonDisabledExample(): React.JSX.Element {
	return (
		<Button appearance="primary" isDisabled>
			Disabled button
		</Button>
	);
}

Selected

Set isSelected to indicate the button is selected.

import React from 'react';

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

const ButtonSelectedExample = (): React.JSX.Element => {
	return <Button isSelected>Selected button</Button>;
};

export default ButtonSelectedExample;

Loading

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.

Enable loading state

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

import Button from '@atlaskit/button/default/button';
import { Inline } from '@atlaskit/primitives/compiled/inline';
import { Stack } from '@atlaskit/primitives/compiled/stack';
import Toggle from '@atlaskit/toggle';

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

export default ButtonLoadingExample;

Spacing

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

import React from 'react';

import ButtonGroup from '@atlaskit/button/button-group';
import Button from '@atlaskit/button/default/button';

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

export default ButtonSpacingExample;

Full width

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.

import React from 'react';

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

const ButtonFullWidthExample = (): React.JSX.Element => {
	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 label. For an icon-only button, see icon button.

Icon before

Display an icon before the text.

import React from 'react';

import Button from '@atlaskit/button/default/button';
import StarStarredIcon from '@atlaskit/icon/core/star-starred';

const ButtonIconBeforeExample = (): React.JSX.Element => {
	return (
		<Button iconBefore={StarStarredIcon} 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/default/button';
import StarIcon from '@atlaskit/icon/core/star-starred';

export default function ButtonIconAfterExample(): React.JSX.Element {
	return (
		<Button iconAfter={StarIcon} appearance="primary">
			Icon after
		</Button>
	);
}

Overriding icon props

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

import React from 'react';

import Button from '@atlaskit/button/default/button';
import WarningIcon from '@atlaskit/icon/core/status-warning';
import { token } from '@atlaskit/tokens';

const ButtonIconOverrideExample = (): React.JSX.Element => {
	return (
		<Button
			iconBefore={(iconProps) => (
				<WarningIcon {...iconProps} size="small" color={token('color.icon.warning')} />
			)}
			appearance="warning"
		>
			Icon with overrides
		</Button>
	);
};

export default ButtonIconOverrideExample;

Truncation

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.

For more information see truncation.

import React from 'react';

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

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

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

export default ButtonTruncationExample;

Custom buttons

CustomThemeButton is deprecated

The CustomThemeButton is deprecated. Use Pressable if you require a custom button to have an easier time with accessibility and consistency.

Was this page helpful?

We use this feedback to improve our documentation.