ButtonGroup is used to display a series of buttons.

also known as Button Row, Action Bar

Figma:

Responsive:

Adaptive:

Props

Component props
Name
Type
Default
children
React.Node
-

One or more Buttons and/or IconButtons.

Usage guidelines

When to use
  • Arranging a group of buttons in a horizontal or vertical stack due to limited space.
  • Showing all the available options at one glance.
When not to use
  • Grouping 4 or more actions, consider using an ellipses IconButton after 3 options.
  • Switching between different views. Use SegmentedControl instead.

Accessibility

Variants

Wrap

When buttons don't fit within the container, they will automatically wrap to the next line.

import { useState } from 'react';
import { Box, Button, ButtonGroup, Flex, Label, Text } from 'gestalt';

export default function Example() {
  const [width, setWidth] = useState(150);

  return (
    <Flex
      alignItems="center"
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <Flex alignItems="center" direction="column" gap={8} width="100%">
        <Flex gap={2}>
          <Label htmlFor="Width">
            <Text>Container width: {width}px</Text>
          </Label>
          <input
            max="300"
            min="150"
            name="Width"
            onChange={(event) => setWidth(parseInt(event.target.value, 10))}
            type="range"
            value={width}
          />
        </Flex>

        <Box borderStyle="sm" width={width}>
          <ButtonGroup>
            <Button text="Button 1" />
            <Button text="Button 2" />
            <Button text="Button 3" />
          </ButtonGroup>
        </Box>
      </Flex>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item
Status
Status description
Figma Library
Ready
Component is available in Figma for web and mobile web.
Responsive Web
Ready
Component responds to changing viewport sizes in web and mobile web.