Component size, gzipped: 16kb

Button Group

Props

Style Overrides

Theme

children

<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>

<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>

onClick

(event, index) => {
  setSelected([index]);
}

(event, index) => {
  setSelected([index]);
}

selected

[0]

[0]

disabled

import * as React from "react";
import { ButtonGroup } from "baseui/button-group";
import { Button } from "baseui/button";

export default () => {
  const [selected, setSelected] = React.useState([0]);
  return (
    <ButtonGroup
      onClick={(event, index) => {
        setSelected([index]);
      }}
      selected={selected}
    >
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

import * as React from "react";
import { ButtonGroup } from "baseui/button-group";
import { Button } from "baseui/button";
export default () => {
  const [selected, setSelected] = React.useState([0]);
  return (
    <ButtonGroup
      onClick={(event, index) => {
        setSelected([index]);
      }}
      selected={selected}
    >
      <Button>One</Button>
      <Button>Two</Button>
      <Button>Three</Button>
    </ButtonGroup>
  );
}

API

Groups a collection of similar actions together.

When to use

If you need to emphasize context of similar actions.
If a single option or multiple options of the set may be selected.

Examples

Basic usage

With icons

With enhancers

Radio mode

In radio mode, the button group functions similarly to a radio group. Only one button can be "selected" at a time.

Checkbox mode

In checkbox mode, the button group functions similarly to a group of checkboxes. Multiple buttons can be "selected" at the same time.

Disabled button group

You can disable the entire button group as in the example above. Or you can disable isolated buttons as in the example below.

Single disabled button

Stateful (uncontrolled) with radio mode

As with many of our components, there is also an uncontrolled version, StatefulButtonGroup, which manages its own state. If mode is set to radio or checkbox, this stateful version of the component will adapt to keep track of the selected value(s).

Stateful (uncontrolled) with checkbox mode

API

ButtonGroup props

Name	Type	Description
children	react node	Buttons within the group
disabled	boolean	Indicates that the button group is disabled
onClick	function	Function called when any button is clicked.
overrides	custom	Lets you customize all aspects of the component.
selected	array	Defines which buttons are selected

ButtonGroup exports

You can import this module like so:

import {ButtonGroup} from 'baseui/button-group'

It exports the following components or utility functions: