Button group component in shandcn

[yashsehgal]

Hello team, I am having a requirement of ButtonGroup component.

Attaching a demo screenshot for reference[1]

I am not sure if this component will going to be there in the upcoming updates, or still in development process. Would love to know if there's any help required here.

As of now, I am using my own solution to use a ButtonGroup for wrapping shadcn buttons, in one of my projects.

[1] - The attached ButtonGroup example is from MantineUI. Would love to have something similar in shadcn-ui as well.

Thanks!

[el-frontend]

That is a necessary feature, one more over here.

[yashsehgal]

Thanks for showing interest in this feature request @gsi-chao ❤️ Would you like to write and propose your solution to this one?

[el-frontend]

I’ll start working on a proposal. I’ll let you know when I have something ready.

[yashsehgal]

Great, just to make sure that project owners and maintainers are also in the loop. Can we please include any member(s) in the discussions.

cc: @shadcn

[The-CodeINN]

here is my little hack

'use client';
import React, { useState, useEffect, useRef } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { LucideIcon, Loader2 } from 'lucide-react';

type ButtonVariant =
  | 'default'
  | 'destructive'
  | 'outline'
  | 'secondary'
  | 'ghost'
  | 'link';

interface ButtonInfo {
  label: string;
  onClick: () => void;
  icon?: LucideIcon;
  disabled?: boolean;
  loading?: boolean;
}

interface ButtonGroupProps {
  buttons: ButtonInfo[];
  variant?: ButtonVariant;
  size?: 'default' | 'sm' | 'lg';
  isOutline?: boolean;
  className?: string;
  orientation?: 'horizontal' | 'vertical';
  isToggle?: boolean;
  isPill?: boolean;
  color?: string;
}

const ButtonGroup = ({
  buttons,
  variant = 'default',
  size = 'default',
  isOutline = false,
  className,
  orientation = 'horizontal',
  isToggle = false,
  isPill = false,
  color,
}: ButtonGroupProps) => {
  const [activeIndex, setActiveIndex] = useState<number | null>(
    isToggle ? 0 : null
  );
  const buttonRefs = useRef<(HTMLButtonElement | null)[]>([]);

  useEffect(() => {
    buttonRefs.current = buttonRefs.current.slice(0, buttons.length);
  }, [buttons]);

  const handleKeyDown = (
    event: React.KeyboardEvent<HTMLButtonElement>,
    index: number
  ) => {
    if (event.key === 'ArrowRight' || event.key === 'ArrowDown') {
      event.preventDefault();
      const nextIndex = (index + 1) % buttons.length;
      buttonRefs.current[nextIndex]?.focus();
    } else if (event.key === 'ArrowLeft' || event.key === 'ArrowUp') {
      event.preventDefault();
      const prevIndex = (index - 1 + buttons.length) % buttons.length;
      buttonRefs.current[prevIndex]?.focus();
    }
  };

  return (
    <div
      className={cn(
        'inline-flex',
        orientation === 'vertical' ? 'flex-col' : 'flex-row',
        isPill ? 'rounded-full' : 'rounded-md',
        'shadow-sm',
        className
      )}
      role='group'
      style={{ '--button-color': color } as React.CSSProperties}
    >
      {buttons.map((button, index) => {
        const Icon = button.icon;
        const isActive = activeIndex === index;
        return (
          <Button
            key={index}
            variant={isOutline ? 'outline' : variant}
            size={size}
            onClick={() => {
              if (isToggle) {
                setActiveIndex(index);
              }
              button.onClick();
            }}
            disabled={button.disabled}
            className={cn(
              orientation === 'horizontal'
                ? 'first:rounded-l-md last:rounded-r-md rounded-none'
                : 'first:rounded-t-md last:rounded-b-md rounded-none',
              index !== 0 && orientation === 'horizontal' && '-ml-px',
              index !== 0 && orientation === 'vertical' && '-mt-px',
              isOutline &&
                orientation === 'horizontal' &&
                'border-r-[1px] last:border-r-0',
              isOutline &&
                orientation === 'vertical' &&
                'border-b-[1px] last:border-b-0',
              isPill && 'first:rounded-l-full last:rounded-r-full',
              isActive && 'bg-primary text-primary-foreground',
              'transition-colors hover:bg-primary/90 hover:text-primary-foreground',
              'focus:relative focus:z-10',
              color && `hover:bg-[var(--button-color)] hover:text-white`
            )}
            ref={(el) => {
              buttonRefs.current[index] = el;
            }}
            onKeyDown={(e) => handleKeyDown(e, index)}
            aria-pressed={isToggle ? isActive : undefined}
          >
            {button.loading ? (
              <Loader2 className='mr-2 h-4 w-4 animate-spin' />
            ) : (
              Icon && <Icon className='mr-2 h-4 w-4' />
            )}
            {button.label}
          </Button>
        );
      })}
    </div>
  );
};

export { ButtonGroup };

[The-CodeINN]

And here is an example usage:

'use client';

import React, { useState } from 'react';
import { Home, Settings, User, Bell, Mail } from 'lucide-react';
import { ButtonGroup } from './ButtonGroup';

export default function Component() {
  const [loading, setLoading] = useState(false);

  const handleClick = (buttonName: string) => {
    console.log(`${buttonName} clicked`);
    if (buttonName === 'Loading Example') {
      setLoading(true);
      setTimeout(() => setLoading(false), 2000);
    }
  };

  const buttons = [
    { label: 'Button 1', onClick: () => handleClick('Button 1') },
    { label: 'Button 2', onClick: () => handleClick('Button 2') },
    { label: 'Button 3', onClick: () => handleClick('Button 3') },
  ];

  const buttonsWithIcons = [
    { label: 'Home', onClick: () => handleClick('Home'), icon: Home },
    {
      label: 'Settings',
      onClick: () => handleClick('Settings'),
      icon: Settings,
    },
    { label: 'Profile', onClick: () => handleClick('Profile'), icon: User },
  ];

  const verticalButtons = [
    {
      label: 'Notifications',
      onClick: () => handleClick('Notifications'),
      icon: Bell,
    },
    { label: 'Messages', onClick: () => handleClick('Messages'), icon: Mail },
    { label: 'Profile', onClick: () => handleClick('Profile'), icon: User },
  ];

  const loadingButtons = [
    { label: 'Normal', onClick: () => handleClick('Normal') },
    {
      label: 'Loading Example',
      onClick: () => handleClick('Loading Example'),
      loading,
    },
    {
      label: 'Disabled',
      onClick: () => handleClick('Disabled'),
      disabled: true,
    },
  ];

  return (
    <div className='flex flex-col space-y-8 p-4'>
      <div>
        <h2 className='text-lg font-semibold mb-2'>Default Button Group</h2>
        <ButtonGroup buttons={buttons} />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>Button Group with Icons</h2>
        <ButtonGroup buttons={buttonsWithIcons} />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>Outline Button Group</h2>
        <ButtonGroup buttons={buttons} isOutline />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>Pill Button Group</h2>
        <ButtonGroup buttons={buttonsWithIcons} isPill />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>Vertical Button Group</h2>
        <ButtonGroup
          buttons={verticalButtons}
          orientation='vertical'
          isOutline
        />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>Toggle Button Group</h2>
        <ButtonGroup buttons={buttonsWithIcons} isToggle />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>
          Custom Color Button Group
        </h2>
        <ButtonGroup
          size='lg'
          className='bg-red-100'
          buttons={buttons}
          color='#6366f1'
        />
      </div>

      <div>
        <h2 className='text-lg font-semibold mb-2'>
          Loading and Disabled States
        </h2>
        <ButtonGroup buttons={loadingButtons} />
      </div>
    </div>
  );
}

[josheverett]

Here is what I did for my project, keeps things more declarative.

import { Children, ReactElement, cloneElement } from 'react';

import { ButtonProps } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface ButtonGroupProps {
  className?: string;
  orientation?: 'horizontal' | 'vertical';
  children: ReactElement<ButtonProps>[];
}

export const ButtonGroup = ({
  className,
  orientation = 'horizontal',
  children,
}: ButtonGroupProps) => {
  const totalButtons = Children.count(children);
  const isHorizontal = orientation === 'horizontal';
  const isVertical = orientation === 'vertical';

  return (
    <div
      className={cn(
        'flex',
        {
          'flex-col': isVertical,
          'w-fit': isVertical,
        },
        className
      )}
    >
      {Children.map(children, (child, index) => {
        const isFirst = index === 0;
        const isLast = index === totalButtons - 1;

        return cloneElement(child, {
          className: cn(
            {
              'rounded-l-none': isHorizontal && !isFirst,
              'rounded-r-none': isHorizontal && !isLast,
              'border-l-0': isHorizontal && !isFirst,

              'rounded-t-none': isVertical && !isFirst,
              'rounded-b-none': isVertical && !isLast,
              'border-t-0': isVertical && !isFirst,
            },
            child.props.className
          ),
        });
      })}
    </div>
  );
};

Usage:

<ButtonGroup>
  <Button variant="outline">Button 1</Button>
  <Button variant="outline">Button 2</Button>
  <Button variant="outline">Button 3</Button>
</ButtonGroup>

<ButtonGroup orientation="vertical">
  <Button variant="outline">A</Button>
  <Button variant="outline">B</Button>
  <Button variant="outline">C</Button>
</ButtonGroup>

Screenshot:

[MahmoudAdel9]

Thanks a lot but my site is rtl so this solution is more general

import { Children, ReactElement, cloneElement } from 'react';

import { ButtonProps } from '@/components/ui/button';
import { cn } from '@/lib/utils';

interface ButtonGroupProps {
  className?: string;
  orientation?: 'horizontal' | 'vertical';
  children: ReactElement<ButtonProps>[];
}

export const ButtonGroup = ({
  className,
  orientation = 'horizontal',
  children
}: ButtonGroupProps) => {
  const totalButtons = Children.count(children);
  const isHorizontal = orientation === 'horizontal';
  const isVertical = orientation === 'vertical';

  return (
    <div
      className={cn(
        'flex',
        {
          'flex-col': isVertical,
          'w-fit': isVertical
        },
        className
      )}
    >
      {Children.map(children, (child, index) => {
        const isFirst = index === 0;
        const isLast = index === totalButtons - 1;

        return cloneElement(child, {
          className: cn(
            {
              'rounded-s-none': isHorizontal && !isFirst,
              'rounded-e-none': isHorizontal && !isLast,
              'border-s-0': isHorizontal && !isFirst,

              'rounded-t-none': isVertical && !isFirst,
              'rounded-b-none': isVertical && !isLast,
              'border-t-0': isVertical && !isFirst
            },
            child.props.className
          )
        });
      })}
    </div>
  );
};

[xarthurx]

Has this feature already been added (not in doc)?
Or users are supposed to do their own version?

[jonknyc]

Have to do it yourself. But cursor helps a lot :)

…

On Sat, Mar 1, 2025 at 5:45 PM ZhaoMA ***@***.***> wrote: Has this feature already been added (not in doc)? Or users are supposed to do their own version? — Reply to this email directly, view it on GitHub <#4283 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABM6IQMJKMNWPWC2SODOVVT2SIZ63AVCNFSM6AAAAABK2526DWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMZWGI3DSOA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[xarthurx]

I'm a bit new to shadcn/ui, and are recently comparing it with MUI.
I understand that shadcn is aiming for flexibility and doesn't provide as many as re-made components as other UI libraries, but for things like this, is there any reason that we don't make it into the official release?

Is there any design guidelines for what should (not) be included?

[jonknyc]

This might be a good case for creating a block: https://ui.shadcn.com/docs/blocks

…

On Sun, Mar 2, 2025 at 7:43 AM ZhaoMA ***@***.***> wrote: I'm a bit new to shadcn/ui, and are recently comparing it with MUI. I understand that shadcn is aiming for flexibility and doesn't provide as many as re-made components as other UI libraries, but for things like this, is there any reason that we don't make it into the official release? Is there any design guidelines for what should (not) be included? — Reply to this email directly, view it on GitHub <#4283 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABM6IQJWFXEMW47BNTKNH4D2SL4FTAVCNFSM6AAAAABK2526DWVHI2DSMVQWIX3LMV43URDJONRXK43TNFXW4Q3PNVWWK3TUHMYTEMZWGU3TGMA> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[PranavSK]

If you have tailwind 4 this is a simpler code

import { cn } from '@/lib/utils'
import { type VariantProps, cva } from 'class-variance-authority'
import type * as React from 'react'

const buttonGroupVariants = cva('flex items-center *:rounded-none', {
  variants: {
    orientation: {
      horizontal: 'flex-row *:first:rounded-s-md *:last:rounded-e-md',
      vertical: 'flex-col *:first:rounded-t-md *:last:rounded-b-md',
    },
  },
  defaultVariants: {
    orientation: 'horizontal',
  },
})

export const ButtonGroup = ({
  className,
  orientation,
  ...props
}: React.ComponentProps<'div'> & VariantProps<typeof buttonGroupVariants>) => {
  return <div className={cn(buttonGroupVariants({ orientation, className }))} {...props} />
}

[morganfeeney]

Hey @PranavSK great idea, but you should at-least use the button element or an a tag, not a div as it affects accessibility.

[marcuslindfeldt]

This is nice but I prefer keeping the original border radius. Also need to account for double borders in case of outline.

import { cn } from "ubc/lib/utils";
import { type VariantProps, cva } from "class-variance-authority";
import type * as React from "react";

const buttonGroupVariants = cva("flex items-center", {
  variants: {
    orientation: {
      horizontal:
        "flex-row *:not-first:rounded-l-none *:not-first:border-l-0 *:not-last:rounded-r-none",
      vertical:
        "flex-col *:not-first:rounded-t-none *:not-first:border-t-0 *:not-last:rounded-b-none",
    },
  },
  defaultVariants: {
    orientation: "horizontal",
  },
});

export const ButtonGroup = ({
  className,
  orientation,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) => {
  return <div className={cn(buttonGroupVariants({ orientation, className }))} {...props} />;
};