Button Group

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

https://

Prop reference

Auto-generated from the component source

ButtonGroup

className
orientation

React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>

ButtonGroupSeparator

className
orientation = "vertical"

React.ComponentProps<typeof Separator>

ButtonGroupText

className
asChild = false

React.ComponentProps<"div"> & { asChild?: boolean; }

Code

// owner: Sona
"use client";

import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
  ButtonGroupText,
} from "@/components/ui/button-group";
import { Input } from "@/components/ui/input";

export default function ButtonGroupExample() {
  return (
    <div className="flex flex-col gap-6">
      <ButtonGroup>
        <Button variant="outline">Day</Button>
        <Button variant="outline">Week</Button>
        <Button
          variant="outline"
          className="bg-primary text-primary-foreground"
        >
          Month
        </Button>
      </ButtonGroup>
      <ButtonGroup className="w-full">
        <ButtonGroupText>https://</ButtonGroupText>
        <Input className="rounded-none" defaultValue="app.aicu.ai" />
        <ButtonGroupSeparator />
        <Button>Launch</Button>
      </ButtonGroup>
    </div>
  );
}

Button Group

Component preview

On this page

Command Palette