Button Group

1import { type VariantProps, cva } from 'class-variance-authority';
2import type * as React from 'react';
3 
4import { cn } from '@/lib/utils';
5 
6const buttonGroupVariants = cva('flex w-fit gap-3', {
7  variants: {
8    orientation: {
9      horizontal: 'flex-row items-center',
10      vertical: 'flex-col items-stretch',
11    },
12  },
13  defaultVariants: {
14    orientation: 'horizontal',
15  },
16});
17 
18interface ButtonGroupProps
19  extends
20    React.ComponentProps<'div'>,
21    VariantProps<typeof buttonGroupVariants> {}
22 
23/**
24 * Groups related buttons together with consistent QBDS spacing.
25 *
26 * Place `Button` children inside and choose their variants (e.g. a primary
27 * action paired with a secondary or ghost action). The group only controls
28 * layout: `orientation` for direction with a constant 12px gap. Size the
29 * child `Button`s directly.
30 *
31 * @example
32 * ```tsx
33 * <ButtonGroup>
34 *   <Button variant="default">Save</Button>
35 *   <Button variant="ghost">Cancel</Button>
36 * </ButtonGroup>
37 * ```
38 */
39function ButtonGroup({ className, orientation, ...props }: ButtonGroupProps) {
40  return (
41    <div
42      data-slot="button-group"
43      role="group"
44      className={cn(buttonGroupVariants({ orientation }), className)}
45      {...props}
46    />
47  );
48}
49 
50export { ButtonGroup, buttonGroupVariants, type ButtonGroupProps };