title: "Button Group" slug: "/packages/button-group" category: "control" componentNames:

• "ButtonGroupBase"
• "ButtonGroup"

Button Group

The ButtonGroup component can be used to select an option from a group of choices. It renders a set of buttons in a row.

To see the autocomplete component in action, check out the input patterns, or the visualization-controls.

import ButtonGroup from "@ds-kit/button-group"

Basic Example

By default the button group component renders a set of styled buttons (using @ds-kit/button).

<ButtonGroup onChange={btn => console.log(`selected: ${btn.label}`)} />

The above will render a usable button group, however you may want to pass your own items into the component in order to make it more useful.

() => {
  var items = [
    { key: 1, label: "First item" },
    { key: 2, label: "Second item" },
    { key: 3, label: "Third item" },
  ]

  return <ButtonGroup initial={items[1]} items={items} />
}

Controlled button group

Button groups can be controlled from the parent component using the selected and onChange props.

class ControlledExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      selected: { key: 1, label: "First item" },
    }
  }
  render() {
    var items = [
      { key: 1, label: "First item" },
      { key: 2, label: "Second item" },
      { key: 3, label: "Third item" },
    ]

    return (
      <ButtonGroup
        selected={this.state.selected}
        items={items}
        onChange={selected => this.setState({ selected })}
      />
    )
  }
}

Size

The ButtonGroup component renders a set of buttons, which can be sized using the same size prop used by the button component.

<>
  <ButtonGroup size="sm" width="100%" my="1rem" />
  <ButtonGroup size="md" width="100%" my="1rem" />
  <ButtonGroup size="lg" width="100%" my="1rem" />
</>

Color

By default, the ButtonGroup renders a set of buttons using the primary color as an accent. It is possible to fully customize the colors using four color props (buttonBg, buttonHoverBg, activeButtonBg, activeButtonHoverBg).

<ButtonGroup
  buttonBg="orange.50"
  buttonHoverBg="orange.100"
  activeButtonBg="orange.400"
  activeButtonHoverBg="orange.500"
/>

Using render props

You can also dig deeper and use render props to customize your button behavior. @ds-kit/button-group can easily be combined with @ds-kit/button.

<ButtonGroup onChange={btn => console.log(`selected: ${btn.label}`)}>
  {(selected, getItemProps) => (
    <>
      {[
        { key: 1, label: "One" },
        { key: 2, label: "Two" },
        { key: 3, label: "Three" },
      ].map(item => {
        const isSelected = item.key === selected.key
        return (
          <Button
            key={item.key}
            bg={isSelected ? "green.400" : "grey.25"}
            color={isSelected ? "white" : "text"}
            hoverBg={isSelected ? "green.500" : "grey.50"}
            {...getItemProps(item)}
          >
            {item.label}
          </Button>
        )
      })}
    </>
  )}
</ButtonGroup>