ButtonGroup

Default button group

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

Show code

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

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

disabled.tsx
ToggleDisabled.tsx

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} />

      <ButtonGroup disabled={disabled}>
        <Group />
      </ButtonGroup>
      <ButtonGroup color="warning" disabled={disabled}>
        <Group />
      </ButtonGroup>

      <ButtonGroup variant="outline" disabled={disabled}>
        <Group />
      </ButtonGroup>
      <ButtonGroup color="info" variant="outline" disabled={disabled}>
        <Group />
      </ButtonGroup>

      <ButtonGroup variant="text" disabled={disabled}>
        <Group />
      </ButtonGroup>
      <ButtonGroup color="success" variant="text" disabled={disabled}>
        <Group />
      </ButtonGroup>
    </>
  );
}

import { Button } from "@hrc/button";
import { Icon } from "@hrc/material-icons";

type Props = {
  disabled: boolean;
  setter: (disabled: boolean) => void;
};

export function ToggleDisabled({ disabled, setter }: Props) {
  return (
    <div>
      <Button
        color={disabled ? "info" : undefined}
        onClick={() => setter(!disabled)}
      >
        <Icon name={disabled ? "toggle_on" : "toggle_off"} />
        Disabled
      </Button>
    </div>
  );
}

Sizes

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

Show code

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

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

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 />:

<ButtonGroup />