Preview
Switch between light and dark to inspect the embedded Storybook preview.
Installation
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/button-group.jsonStorybook
Explore all variants, controls, and accessibility checks in the interactive Storybook playground.
View in StorybookCode
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "../../lib/utils";
const buttonGroupVariants = cva(
"isolate inline-flex w-fit [&>*:focus-visible]:z-10 [&>*:focus-within]:z-10",
{
defaultVariants: {
orientation: "horizontal",
},
variants: {
orientation: {
horizontal:
"flex-row [&>*:not(:first-child)]:-ml-px [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:rounded-r-none",
vertical:
"flex-col [&>*:not(:first-child)]:-mt-px [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:rounded-b-none",
},
},
},
);
/**
* Visually connected group of buttons that share borders.
*
* @example
* <ButtonGroup>
* <Button variant="outline">Prev</Button>
* <Button variant="outline">Next</Button>
* </ButtonGroup>
*/
export type ButtonGroupProps = React.ComponentPropsWithoutRef<"div"> &
VariantProps<typeof buttonGroupVariants>;
const ButtonGroup = ({
className,
orientation,
ref,
...props
}: ButtonGroupProps & { ref?: React.Ref<HTMLDivElement> }) => (
<div
className={cn(buttonGroupVariants({ orientation }), className)}
data-slot="button-group"
ref={ref}
role="group"
{...props}
/>
);
ButtonGroup.displayName = "ButtonGroup";
export { ButtonGroup, buttonGroupVariants };