@ds-kit/button-group

---

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

• "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}`)}
/>

Usage with ds-kit button

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>