ButtonGroup

View source on GitHub

See recent changes on GitHub

ButtonGroup is used to display a series of buttons.

also known as Button Row, Action Bar

Figma:

Ready

Responsive:

Ready

Adaptive:

N/A

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.

Edit page on GitHub