@wsdm/ui-button-group

Button Group Component

The button group is a purely functional component that makes little to no assumptions about style. It just provides a frame for groups of elements, of which one will have a selected state. This works equally well for button groups and tabs.

import ButtonGroup from "@wsdm/ui-button-group"

const buttonResetStyles = {
  WebkitAppearance: "none",
  fontFamily: "inherit",
  fontSize: "inherit",
  lineHeight: 1.25,
  padding: "1rem",
  border: "none",
  cursor: "pointer",
}

const getBackgroundColor = (a, b) => (a.key === b.key ? "#000" : "transparent")
const getTextColor = (a, b) => (a.key === b.key ? "#FFF" : "inherit")

const sampleButtons = [
  { key: "one", label: "Button One" },
  { key: "two", label: "Button Two" },
  { key: "three", label: "Button Three" },
  { key: "four", label: "Button Four" },
]

const Buttons = () => (
  <ButtonGroup start={sampleButtons[0]} onChange={tab => console.log(tab)}>
    {(activeButton, getButtonProps) => (
      <div>
        {sampleButtons.map(tab => (
          <button
            {...getButtonProps(tab)}
            style={{
              ...buttonResetStyles,
              backgroundColor: getBackgroundColor(tab, activeButton),
              color: getTextColor(tab, activeButton),
            }}
          >
            {tab.label}
          </button>
        ))}
      </div>
    )}
  </ButtonGroup>
)

Props

The following properties can be set on the <ButtonGroup /> component.

Name	Type	Default
indexKey	String	"key"
start	Object	null
onChange	Func	null
useInnerRef *	Bool	false

*useInnerRef is useful when using a glamorous component for the tabbing item.

ActiveButton

The first variable in the children function contains the entire object of the currently selected item. You can use this to set custom styles on your buttons/tabs. Its structure will depend on the structure of your data, but it will also add dimensions (left, right, width, height) to the current selected item.

getButtonProps

getButtonProps is a function that will allow you to create the properties necessary to wire up each button within the button group. You can pass these props to your button/tab using the spread operator.