Split button

A split button pairs a primary action with a menu of related actions.

#Default

Put the most common action on the left and the rest behind the arrow.

import { Button, SplitButton } from '@wolf-rayet/react';

<SplitButton>
  <Button>Save</Button>
  <Button aria-label="More save options" iconBefore={<Chevron />} />
</SplitButton>

#Primary

Use the primary appearance when the action is the main one on the page.

import { Button, SplitButton } from '@wolf-rayet/react';

<SplitButton appearance="primary">
  <Button appearance="primary">Create</Button>
  <Button appearance="primary" aria-label="More create options" iconBefore={<Chevron />} />
</SplitButton>

#Compact

Use compact spacing in dense interfaces.

import { Button, SplitButton } from '@wolf-rayet/react';

<SplitButton appearance="primary">
  <Button appearance="primary" spacing="compact">Assign</Button>
  <Button appearance="primary" spacing="compact" aria-label="More assign options" iconBefore={<Chevron />} />
</SplitButton>