MultiButton

Multi-buttons are grouped sets of buttons displayed horizontally or vertically in the same container.

vertical

disabled

size

xssmmdlgxl

<HvMultiButton 
  vertical={false}
  disabled={false}
  size="md"
  icon={<HvIconInfo />}
>
  <No Display Name startIcon={<HvIconMap />}>
    Map
  </No Display Name>
  <No Display Name startIcon={<HvIconLocationPin />}>
    Satellite
  </No Display Name>
  <No Display Name startIcon={<HvIconAbacus />}>
    Abacus
  </No Display Name>
</HvMultiButton>

<HvMultiButton 
  vertical={false}
  disabled={false}
  size="md"
  icon={<HvIconInfo />}
>
  <No Display Name startIcon={<HvIconMap />}>
    Map
  </No Display Name>
  <No Display Name startIcon={<HvIconLocationPin />}>
    Satellite
  </No Display Name>
  <No Display Name startIcon={<HvIconAbacus />}>
    Abacus
  </No Display Name>
</HvMultiButton>

Content

The HvMultiButton component uses the HvButton component to create a group of buttons. You can use the buttons underneath to display the multibutton content in different ways. For example, you can use icons, display labels only or set some items as disabled.

<div className="flex flex-col gap-2">
  <HvMultiButton style={{ width: "fit-content" }}>
    <HvButton icon aria-label="Map">
      <Map />
    </HvButton>
    <HvButton icon aria-label="Location">
      <LocationPin />
    </HvButton>
    <HvButton icon aria-label="Transport">
      <Bus />
    </HvButton>
  </HvMultiButton>
  <HvMultiButton style={{ width: "320px" }}>
    <HvButton>Map</HvButton>
    <HvButton>Location</HvButton>
    <HvButton>Transport</HvButton>
  </HvMultiButton>
  <HvMultiButton style={{ width: "320px" }}>
    <HvButton startIcon={<Map />}>Map</HvButton>
    <HvButton disabled>Location</HvButton>
    <HvButton endIcon={<Bus />}>Transport</HvButton>
  </HvMultiButton>
</div>

<div className="flex flex-col gap-2">
  <HvMultiButton style={{ width: "fit-content" }}>
    <HvButton icon aria-label="Map">
      <Map />
    </HvButton>
    <HvButton icon aria-label="Location">
      <LocationPin />
    </HvButton>
    <HvButton icon aria-label="Transport">
      <Bus />
    </HvButton>
  </HvMultiButton>
  <HvMultiButton style={{ width: "320px" }}>
    <HvButton>Map</HvButton>
    <HvButton>Location</HvButton>
    <HvButton>Transport</HvButton>
  </HvMultiButton>
  <HvMultiButton style={{ width: "320px" }}>
    <HvButton startIcon={<Map />}>Map</HvButton>
    <HvButton disabled>Location</HvButton>
    <HvButton endIcon={<Bus />}>Transport</HvButton>
  </HvMultiButton>
</div>

Controlled

import { useState } from "react";


export default function MultiButtonControlled() {
  const [selection, setSelection] = useState([]);


  return (
    <>
      <HvButton
        variant="primarySubtle"
        onClick={() => setSelection([1, 2, 3, 4, 5])}
      >
        Select weekdays
      </HvButton>


      <HvMultiButton style={{ width: "224px" }}>
        {buttons.map((button, i) => (
          <HvButton
            key={`${buttons[i]}`}
            aria-label={button}
            selected={selection.includes(i)}
            onClick={() => {
              if (selection.includes(i)) {
                setSelection(selection.filter((item) => item !== i));
              } else {
                setSelection([...selection, i]);
              }
            }}
          >
            {button[0]}
          </HvButton>
        ))}
      </HvMultiButton>
    </>
  );
}


const buttons = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

import { useState } from "react";

export default function MultiButtonControlled() {
  const [selection, setSelection] = useState([]);

  return (
    <>
      <HvButton
        variant="primarySubtle"
        onClick={() => setSelection([1, 2, 3, 4, 5])}
      >
        Select weekdays
      </HvButton>

      <HvMultiButton style={{ width: "224px" }}>
        {buttons.map((button, i) => (
          <HvButton
            key={`${buttons[i]}`}
            aria-label={button}
            selected={selection.includes(i)}
            onClick={() => {
              if (selection.includes(i)) {
                setSelection(selection.filter((item) => item !== i));
              } else {
                setSelection([...selection, i]);
              }
            }}
          >
            {button[0]}
          </HvButton>
        ))}
      </HvMultiButton>
    </>
  );
}

const buttons = [
  "Sunday",
  "Monday",
  "Tuesday",
  "Wednesday",
  "Thursday",
  "Friday",
  "Saturday",
];

Split button

You can create a split button by using the HvMultiButton in conjunction with the HvButton and the HvDropDownMenu components.

import { useMemo, useState } from "react";


export default function Demo() {
  const options = useMemo(
    () => [
      { label: "Merge commit" },
      { label: "Squash and merge" },
      { label: "Rebase and merge" },
    ],
    [],
  );
  const [selectedOption, setSelectedOption] = useState(options[0]);


  return (
    <HvSimpleGrid cols={3} spacing="sm">
      <HvMultiButton split>
        <HvButton>{selectedOption.label}</HvButton>
        <HvDropDownMenu
          dataList={options}
          icon={<DropDownXS />}
          onClick={(e, item) =>
            setSelectedOption(
              options.filter((option) => option.label === item.label)[0],
            )
          }
        />
      </HvMultiButton>
    </HvSimpleGrid>
  );
}

import { useMemo, useState } from "react";

export default function Demo() {
  const options = useMemo(
    () => [
      { label: "Merge commit" },
      { label: "Squash and merge" },
      { label: "Rebase and merge" },
    ],
    [],
  );
  const [selectedOption, setSelectedOption] = useState(options[0]);

  return (
    <HvSimpleGrid cols={3} spacing="sm">
      <HvMultiButton split>
        <HvButton>{selectedOption.label}</HvButton>
        <HvDropDownMenu
          dataList={options}
          icon={<DropDownXS />}
          onClick={(e, item) =>
            setSelectedOption(
              options.filter((option) => option.label === item.label)[0],
            )
          }
        />
      </HvMultiButton>
    </HvSimpleGrid>
  );
}

Loading Container Overflow Tooltip

MultiButton

Content

Controlled

Split button

Related components