ButtonGroup

The ButtonGroup component allows you to group multiple buttons together, either horizontally or vertically. It is useful for organizing related actions. The button data is passed via the buttonsProps prop, which should contain an array of props for each individual button.

Usage

import { ButtonGroup, IconV2, DropdownMenu } from '@harnessio/ui/components'

return (
  <ButtonGroup
      iconOnly
      size="sm"
      buttonsProps={[
        { children: <IconV2 name="info-circle" />, onClick: () => { console.log('Button icon') } },
        { children: <IconV2 name="key-back" />, tooltipProps: { title: 'Title', content: <p>This is a tooltip</p> }, onClick: () => { console.log('Button with tooltip') } },
        { children: <IconV2 name="more-vert" />, dropdownContent: (
          <>
            <DropdownMenu.Item title="Item title" />
            <DropdownMenu.Item title="With description" description="Item description" />
            <DropdownMenu.Separator />
            <DropdownMenu.Item title="With label" label="Label" />
            <DropdownMenu.Item title="With checkmark" checkmark />
            <DropdownMenu.Item title="With shortcut" shortcut="⇧⌘P" />
          </>
        )}
      ]}
    />
)

Layout Orientation

The ButtonGroup component accepts an orientation prop, which defines the layout direction: either horizontal or vertical.

Sizes

The ButtonGroup component accepts a size prop to control its overall dimensions. Supported values are: default, sm, and xs.

Icon only

The ButtonGroup component accepts a iconOnly prop. When this prop is set, the Bitton is styled to fit the dimensions of an icon, making it suitable for icon-only buttons.

With tooltip

Within buttonsProps, you can provide tooltipProps to define tooltip data for a specific button.

With Dropdown Content

Within buttonsProps, you can provide a dropdownContent property to define the dropdown content for a specific button.

API Reference

Type ButtonGroupButtonProps

type ButtonGroupTooltipProps = Pick<
  TooltipProps,
  "title" | "content" | "side" | "align"
>;

type BaseButtonProps = Omit<
  ButtonProps,
  "variant" | "size" | "theme" | "asChild" | "iconOnly" | "rounded" | "type"
>;

type ButtonWithTooltip = BaseButtonProps & {
  tooltipProps: ButtonGroupTooltipProps;
  dropdownContent?: undefined;
};

type ButtonWithDropdown = BaseButtonProps & {
  dropdownContent: ReactNode;
  tooltipProps?: undefined;
};

type ButtonGroupButtonProps = ButtonWithTooltip | ButtonWithDropdown;

Prop	Required	Default	Type
orientation	false	horizontal	'horizontal' | 'vertical'
className	false		string
size	false	md	'md' | 'sm' | 'xs'
buttonsProps	true		ButtonGroupButtonProps[]
iconOnly	false		boolean