ButtonGroupNew

Import

import { ButtonGroup } from '@heroui/react';

Usage

import {
  ChevronDown,
  ChevronLeft,
  ChevronRight,
  CodeFork,

Anatomy

import { ButtonGroup, Button } from '@heroui/react';

export default () => (
  <ButtonGroup>
    <Button>First</Button>
    <Button>Second</Button>
    <Button>Third</Button>
  </ButtonGroup>
)

ButtonGroup wraps multiple Button components together, applying consistent styling, spacing, and automatic border radius handling. It uses React Context to pass size, variant, and isDisabled props to all child buttons.

Variants

import {Button, ButtonGroup} from "@heroui/react";

export function Variants() {
  return (
    <div className="flex flex-col gap-6">

Sizes

import {Button, ButtonGroup} from "@heroui/react";

export function Sizes() {
  return (
    <div className="flex flex-col gap-4">

With Icons

import {Globe, Plus, TrashBin} from "@gravity-ui/icons";
import {Button, ButtonGroup} from "@heroui/react";

export function WithIcons() {
  return (

Full Width

import {TextAlignCenter, TextAlignLeft, TextAlignRight} from "@gravity-ui/icons";
import {Button, ButtonGroup} from "@heroui/react";

export function FullWidth() {
  return (

Disabled State

import {Button, ButtonGroup} from "@heroui/react";

export function Disabled() {
  return (
    <div className="flex flex-col gap-6">

Without Separator

import {Button, ButtonGroup} from "@heroui/react";

export function WithoutSeparator() {
  return (
    <ButtonGroup hideSeparator>

Styling

Passing Tailwind CSS classes

import { ButtonGroup } from '@heroui/react';

function CustomButtonGroup() {
  return (
    <ButtonGroup className="gap-2">
      <Button>First</Button>
      <Button>Second</Button>
      <Button>Third</Button>
    </ButtonGroup>
  );
}

Customizing the component classes

To customize the ButtonGroup component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .button-group {
    @apply gap-2 rounded-lg;
  }
}

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The ButtonGroup component uses these CSS classes (View source styles):

Base Classes

• .button-group - Base button group container

The ButtonGroup component automatically applies border radius to buttons:

• First button gets rounded left/start edge
• Last button gets rounded right/end edge
• Middle buttons have no border radius
• Single button gets full border radius on all edges

Separators are automatically added between buttons using a pseudo-element (:before) on buttons that are not the first child.

API Reference

ButtonGroup Props

Notes

• ButtonGroup uses React Context to pass size, variant, and isDisabled props to all child Button components
• Individual Button components can override the group's isDisabled prop by setting isDisabled={false}
• The component automatically handles border radius and separators between buttons
• Buttons in a group have their active/pressed scale transform removed for a more cohesive appearance