Button Group

Joins outline buttons / icon buttons into a segmented control. Horizontal or vertical.

View in Figma
<ButtonGroup>
  <Button variant="outline">Day</Button>
  <Button variant="outline">Week</Button>
  <Button variant="outline">Month</Button>
</ButtonGroup>
<ButtonGroup>
  <IconButton
    icon={faBars}
    aria-label="List view"
  />
  <IconButton
    icon={faTableColumns}
    aria-label="Grid view"
  />
  <IconButton
    icon={faCalendar}
    aria-label="Calendar view"
  />
</ButtonGroup>
<ButtonGroup>
  <Button variant="outline">Label</Button>
  <IconButton
    icon={faFilter}
    aria-label="Filter"
  />
</ButtonGroup>
<ButtonGroup orientation="vertical">
  <IconButton
    icon={faChevronUp}
    aria-label="Increase"
  />
  <IconButton
    icon={faChevronDown}
    aria-label="Decrease"
  />
</ButtonGroup>
<ButtonGroup>
  <Button variant="outline" size="sm">Day</Button>
  <Button variant="outline" size="sm">
    Week
  </Button>
  <Button variant="outline" size="sm">
    Month
  </Button>
</ButtonGroup>
<ButtonGroup orientation="vertical">
  <IconButton
    icon={faChevronUp}
    size="sm"
    aria-label="Increase"
  />
  <IconButton
    icon={faChevronDown}
    size="sm"
    aria-label="Decrease"
  />
</ButtonGroup>
Props
orientation:"horizontal" | "vertical"= "horizontal"
Lay children in a row or column.
children:ReactNode
Outline Buttons or IconButtons to join.
Tokens