Button Group

1import { ComponentProps } from 'react';
2 
3import { cn } from '@/lib/utils';
4 
5interface IButtonGroupProps extends ComponentProps<'div'> {
6  orientation?: 'horizontal' | 'vertical';
7}
8 
9/** Group of related buttons displayed together. */
10function ButtonGroup({ className, orientation = 'horizontal', ...props }: IButtonGroupProps) {
11  return (
12    <div
13      role='group'
14      className={cn(
15        'inline-flex',
16        orientation === 'horizontal'
17          ? '*:rounded-none [&>*:first-child]:rounded-l-md [&>*:last-child]:rounded-r-md [&>*:not(:first-child)]:-ml-px'
18          : 'flex-col *:rounded-none [&>*:first-child]:rounded-t-md [&>*:last-child]:rounded-b-md [&>*:not(:first-child)]:-mt-px',
19        className,
20      )}
21      {...props}
22    />
23  );
24}
25 
26/** Toolbar container for button groups. */
27function ButtonToolbar({ className, ...props }: ComponentProps<'div'>) {
28  return (
29    <div role='toolbar' className={cn('flex flex-wrap items-center gap-2', className)} {...props} />
30  );
31}
32 
33export { ButtonGroup, ButtonToolbar };