ButtonGroup

A ButtonGroup is an array of buttons. One of which is active at any given time.

ButtonGroup

Edit the props to see this component update live!

jsx

<ButtonGroup
  variant="secondary"
  data={buttonGroupData}
  handleClick={(data) => {
    alert(`You selected ${data.label}, id: ${data.id}!`)
  }}
/>

<ButtonGroup
  variant="secondary"
  data={buttonGroupData}
  handleClick={(data) => {
    alert(`You selected ${data.label}, id: ${data.id}!`)
  }}
/>

Data

Each object in the data array defines a button in the group. Any valid Button prop can be added the data object defining a button.

An id in combination with either a label or an icon is the minimum object needed to define a button.

json

[
  {
    "id": "1",
    "label": "Pants",
    "variant": "primary",
    "size": "xl",
    "shadow": {true},
    "right": {true},
  },
  ... more buttons

]

You can customize props on a per button basis.

Passing different props to each button

jsx

<ButtonGroup
  data={[
    {
      id: "1",
      icon: <BiBus />,
      message: "Thank-you for choosing the bus",
    },
    {
      id: "2",
      icon: <BiCar />,
      message: "Drive safely",
    },
    {
      id: "3",
      variant: "warning",
      label: "Not going",
      message: "Staying put is also good",
      shadow: true,
    },
    {
      id: "4",
      variant: "success",
      label: "Success",
      message: "Another buton successfully added to the group",
      icon: <BsPatchCheckFill />,
      shadow: true,
      right: true,
    },
  ]}
  handleClick={(data) => {
    alert(`${data.message}!`)
  }}
/>

ButtonGroup Props vs Button Definition Props

Props defined at the ButtonGroup level take precendence over props defined in the data array.

ButtonGroup prop takes precendence over data props

jsx

<ButtonGroup
  variant="secondary"
  shadow={true}
  right={true}
  data={[
    {
      id: "1",
      label: "Bus",
      icon: <BiBus />,
      message: "Thank-you for choosing the bus",
      variant: "success",
    },
    {
      id: "2",
      label: "Car",
      icon: <BiCar />,
      message: "Drive safely",
    },
    {
      id: "3",
      label: "Air",
      icon: <FaPlane />,
      message: "Buckle up there's gonna be turbulance",
    },
  ]}
  handleClick={(data) => {
    alert(`${data.message}!`)
  }}
/>

handleClick

The handleClick prop takes a function that will be run when the onClick function of a Button is called.

The data object defining each button is made available to handleClick function.

Currently Selected Button

By default the first button defined in the data array is the currently selected button on page load. The disabled html property is set on the currently selected Button in a ButtonGroup.

To set another button as the currently selected button on page load, pass the button id to the initialState prop

Setting the currently selected button on page load

jsx

<ButtonGroup
  variant="primary"
  initialState="3"
  data={[
    {
      id: "1",
      label: "Pants",
    },
    {
      id: "2",
      label: "Shirts",
    },
    {
      id: "3",
      label: "Hats",
    },
    {
      id: "4",
      label: "Shoes",
    },
    {
      id: "5",
      label: "Turnips!",
    },
  ]}
  handleClick={(data) => {
    alert(`You selected ${data.label}, id: ${data.id}!`)
  }}
/>