Split button

A split button lets people perform an action or choose from a small group of similar actions.

Default

The default form of a split button, used for most cases. For most split buttons the secondary action should be a dropdown menu.

import React from 'react';

import Button from '@atlaskit/button/default/button';
import IconButton from '@atlaskit/button/icon/button';
import { SplitButton } from '@atlaskit/button/split-button/split-button';
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';

const SplitButtonDefaultExample = (): React.JSX.Element => {
	return (
		<SplitButton>
			<Button>Link work item</Button>
			<DropdownMenu<HTMLButtonElement>
				shouldRenderToParent
				trigger={({ triggerRef, ...triggerProps }) => (
					<IconButton
						ref={triggerRef}
						{...triggerProps}
						icon={ChevronDownIcon}
						label="More link work item options"
					/>
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Option one</DropdownItem>
					<DropdownItem>Option two</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</SplitButton>
	);
};

export default SplitButtonDefaultExample;

Appearance

Primary

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

import React from 'react';

import Button from '@atlaskit/button/default/button';
import IconButton from '@atlaskit/button/icon/button';
import { SplitButton } from '@atlaskit/button/split-button/split-button';
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';

const SplitButtonPrimaryExample = (): React.JSX.Element => {
	return (
		<SplitButton appearance="primary">
			<Button>Update</Button>
			<DropdownMenu<HTMLButtonElement>
				shouldRenderToParent
				trigger={({ triggerRef, ...triggerProps }) => (
					<IconButton
						ref={triggerRef}
						{...triggerProps}
						icon={ChevronDownIcon}
						label="More update options"
					/>
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Option one</DropdownItem>
					<DropdownItem>Option two</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</SplitButton>
	);
};

export default SplitButtonPrimaryExample;

Spacing

Compact

import React from 'react';

import Button from '@atlaskit/button/default/button';
import IconButton from '@atlaskit/button/icon/button';
import { SplitButton } from '@atlaskit/button/split-button/split-button';
import DropdownMenu from '@atlaskit/dropdown-menu/dropdown-menu';
import DropdownItem from '@atlaskit/dropdown-menu/dropdown-menu-item';
import DropdownItemGroup from '@atlaskit/dropdown-menu/dropdown-menu-item-group';
import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';

const SplitButtonPrimaryExample = (): React.JSX.Element => {
	return (
		<SplitButton spacing="compact">
			<Button>Link work item</Button>
			<DropdownMenu<HTMLButtonElement>
				shouldRenderToParent
				trigger={({ triggerRef, ...triggerProps }) => (
					<IconButton
						ref={triggerRef}
						{...triggerProps}
						icon={ChevronDownIcon}
						label="More link work item options"
					/>
				)}
			>
				<DropdownItemGroup>
					<DropdownItem>Option one</DropdownItem>
					<DropdownItem>Option two</DropdownItem>
				</DropdownItemGroup>
			</DropdownMenu>
		</SplitButton>
	);
};

export default SplitButtonPrimaryExample;

Was this page helpful?

We use this feedback to improve our documentation.