Button Group

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

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

[0]

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

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

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

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

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

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

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).

API

ButtonGroup props

You can check the implementation of the component for more details.

ButtonGroup exports

You can import this module like so:

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

It exports the following components or utility functions:

• ButtonGroup
• StatefulButtonGroup