Skip to contentWolf-Rayet

Button group

A button group shows related actions together.

#Default

Put the primary action last, where people finish reading.

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

<ButtonGroup label="Form actions">
  <Button>Cancel</Button>
  <Button appearance="primary">Save</Button>
</ButtonGroup>

#Three actions

Keep a group to three or fewer, or move the rest into a menu.

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

<ButtonGroup label="Conversation actions">
  <Button>Snooze</Button>
  <Button>Reassign</Button>
  <Button appearance="primary">Resolve</Button>
</ButtonGroup>