See Button Usage Guidelines for Button type and arrangement information.

    <Button primary>Save</Button>

Attached Groups

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

<ButtonGroup attached>

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" />

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>

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',
        <ButtonGroup attached>
            <Button primary fill='subtle'>View</Button>
            <Button primary fill='subtle'>Edit</Button>

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

Full Width Groups

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

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

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

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

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.


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