Skip to content

ButtonGroup

Default button group

Use the variant prop to change the visual aspect of the button group.

Show code
default.tsx
import { Button, ButtonGroup } from "@hrc/button";
export function ButtonGroupDefault() {
return (
<>
<ButtonGroup>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="outline">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup variant="text">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</>
);
}

Colors

Use the color prop to change the color of the button group.

Show code
colors.tsx
import { Button, ButtonGroup } from "@hrc/button";
const colors = [
"primary",
"secondary",
"error",
"info",
"warning",
"success",
] as const;
export function ButtonGroupColors() {
return colors.map((color) => (
<div key={`button-group-${color}`}>
<ButtonGroup color={color}>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color={color} variant="outline">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color={color} variant="text">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
));
}

Disabled

Add the disabled prop to disable the buttons of the group. The disabled variant has a higher priority than the color variant.

Show code
import { useState } from "react";
import { Button, ButtonGroup } from "@hrc/button";
import { ToggleDisabled } from "./ToggleDisabled";
const Group = () => {
return (
<>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</>
);
};
export function ButtonGroupDisabled() {
const [disabled, setDisabled] = useState(false);
return (
<>
<ToggleDisabled disabled={disabled} setter={setDisabled} />
<div>
<ButtonGroup disabled={disabled}>
<Group />
</ButtonGroup>
<ButtonGroup variant="outline" disabled={disabled}>
<Group />
</ButtonGroup>
<ButtonGroup variant="text" disabled={disabled}>
<Group />
</ButtonGroup>
</div>
<div>
<ButtonGroup color="warning" disabled={disabled}>
<Group />
</ButtonGroup>
<ButtonGroup color="info" variant="outline" disabled={disabled}>
<Group />
</ButtonGroup>
<ButtonGroup color="success" variant="text" disabled={disabled}>
<Group />
</ButtonGroup>
</div>
</>
);
}

Sizes

Set the size prop to change the size of the button group.

Show code
sizes.tsx
import { Button, ButtonGroup } from "@hrc/button";
export function ButtonGroupSizes() {
return (
<>
<ButtonGroup size="small" color="primary">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color="primary">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup size="large" color="primary">
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</>
);
}

Column

Add the column prop to display the button group in a column layout.

Show code
column.tsx
import { Button, ButtonGroup } from "@hrc/button";
const colors = ["secondary", "error"] as const;
export function ButtonGroupColumn() {
return colors.map((color) => (
<div key={`button-group-column-${color}`}>
<ButtonGroup color={color} column>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color={color} variant="outline" column>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
<ButtonGroup color={color} variant="text" column>
<Button>One</Button>
<Button>Two</Button>
<Button>Three</Button>
</ButtonGroup>
</div>
));
}

With icons

Use the <ButtonIcon /> component to display icons in the button group.

Show code
with-icons.tsx
import { Button, ButtonIcon, ButtonGroup } from "@hrc/button";
import { Icon } from "@hrc/material-icons";
const Group = () => {
return (
<>
<ButtonIcon>
<Icon name="add" />
</ButtonIcon>
<ButtonIcon>
<Icon name="remove" />
</ButtonIcon>
<ButtonIcon>
<Icon name="percent" />
</ButtonIcon>
<Button>Clear</Button>
</>
);
};
export function ButtonGroupWithIcons() {
return (
<>
<ButtonGroup color="success">
<Group />
</ButtonGroup>
<ButtonGroup color="success" variant="outline">
<Group />
</ButtonGroup>
<ButtonGroup color="success" variant="text">
<Group />
</ButtonGroup>
</>
);
}

API

See documentation below for reference to all of the props, classes and CSS variables (custom properties) available for <ButtonGroup />: