See Button Usage Guidelines for Button type and arrangement information.

<ButtonGroup>
    <Button primary>Save</Button>
    <Button>Discard</Button>
</ButtonGroup>

Attached Groups

Attached Button Groups are used for horizontal bars of buttons, like toolbars, and group related actions.

<ButtonGroup attached>
    <Button>Filter</Button>
    <Button>Sort</Button>
    <Button>Refresh</Button>
</ButtonGroup>

Button Groups can be used to attach dropdown menus to Primary Action buttons.

<ButtonGroup attached>
    <Button primary>Add Customer</Button>
    <Button primary iconName="expand_more" />
</ButtonGroup>

In space-constrained layouts, attached Button Groups will allow actions to live within a smaller footprint.

<ButtonGroup attached>
    <Button primary>Add Customer</Button>
    <Button outline primary>Add Technician</Button>
    <Button outline primary>Add Contractor</Button>
</ButtonGroup>

Using text buttons in a Button Group evenly spaces the buttons in content-heavy sections like tables.

const Row = ({children}) => (
    <Stack alignItems="center" justifyContent="space-between" style={{
        borderTop: '1px solid #efefef',
        padding: '1em 0',
    }}>
        <div>{children}</div>
        <ButtonGroup attached>
            <Button primary fill='subtle'>View</Button>
            <Button primary fill='subtle'>Edit</Button>
        </ButtonGroup>
    </Stack>
);

render(
    <div>
        <Headline className="m-t-0 m-t-1">Employees</Headline>
        <Row>Lisbeth Anglin</Row>
        <Row>Etta Twiford</Row>
        <Row>Renea Finlayson</Row>
    </div>
)

Full Width Groups

Full width Button Groups are used to fill the space within a small content area like a Card or Modal.

<Card>
    <ButtonGroup attached fullWidth>
        <Button fill='subtle' primary>Small</Button>
        <Button fill='subtle' primary>Medium Size</Button>
        <Button fill='subtle' primary>Long Button Name</Button>
    </ButtonGroup>
</Card>

With solid and outline buttons, it's recommended to set the buttons to equal width.

<Card>
    <ButtonGroup attached fullWidth equalWidth>
        <Button>Small</Button>
        <Button primary>Long Button Name</Button>
    </ButtonGroup>
</Card>

Best Practices

A Button Group should:

  • Group together actions that are related
  • Not have too many buttons to cause user indecision
  • Not have too many buttons to fit on small devices

Related Components

  • For an individual button, use a Button.

Importing

import { ButtonGroup } from '@servicetitan/design-system';