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.