<ButtonGroup />

A component that joins several buttons into one control. This is a custom component with no Base UI primitive. It joins several Button elements into one control: the children keep their variant and size, and only the outer corners are rounded.

Here is the component implementation code that you can copy to your project:

// https://devie-ui.com/components/button-group
 
import clsx from "clsx";
import type { ComponentProps } from "react";
import styles from "./ButtonGroup.module.scss";
 
function ButtonGroup({ className, ...props }: ButtonGroup.Props) {
  return <fieldset className={clsx(styles.group, className)} {...props} />;
}
 
namespace ButtonGroup {
  export interface Props extends ComponentProps<"fieldset"> {
    className?: string;
  }
}
 
export default ButtonGroup;

Simple button group

Wrap two or more Button elements in ButtonGroup. Set aria-label to name the group.

Split button

Pair a primary action with a Menu trigger. Pass an icon Button to the trigger render prop and give it an aria-label.

Icon buttons

Use the icon-secondary variant for a compact group. Each button needs an aria-label.

Sizes

Set the same size on every button in a group.