@ds-kit/button-group

---

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

• "ButtonGroupBase"
• "ButtonGroup"

---

Button Group

The ButtonGroup component can be used to select an option from a group of choices.

To get started with buttonGroup, import a buttonGroup from Ds-kit.

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

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

You can control the size of the button group using the size prop.

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

Color

You can control the color of the buttons using a set of helper props.

<ButtonGroup
  buttonBg="orange.25"
  buttonHoverBg="orange.50"
  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>