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>
  );
};