ButtonGroup

Navigation

A labeled cluster of related actions in either orientation.

Horizontal actionsVertical icon actionsDisabled action

Responsive viewport — resize the window to explore. Direction and density apply only to this preview. Theme applies to the docs too.

button-group.tsx

"use client";

import { ButtonGroup } from "@/components/ui/button-group";
import { Button } from "@dashboardpack/core/components/ui/button";
import { Bold, Italic } from "lucide-react";
import { useState } from "react";

export default function ButtonGroupExample() {
  const [message, setMessage] = useState("Choose a document action");
  const [bold, setBold] = useState(false);
  return (
    <div className="space-y-5">
      <ButtonGroup aria-label="Document actions">
        <Button
          size="sm"
          onClick={() => setMessage("Document saved in preview")}
        >
          Save
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={() => setMessage("Draft saved in preview")}
        >
          Save draft
        </Button>
      </ButtonGroup>
      <div>
        <ButtonGroup orientation="vertical" aria-label="Text formatting">
          <Button
            size="icon-sm"
            variant="ghost"
            aria-label="Bold"
            aria-pressed={bold}
            onClick={() => setBold(!bold)}
          >
            <Bold aria-hidden />
          </Button>
          <Button size="icon-sm" variant="ghost" aria-label="Italic" disabled>
            <Italic aria-hidden />
          </Button>
        </ButtonGroup>
      </div>
      <p role="status" className="text-xs text-muted-foreground">
        {message}
        {bold ? " · Bold enabled" : ""}
      </p>
    </div>
  );
}

Usage

Place related Button components inside ButtonGroup. The wrapper groups actions visually and semantically; each child remains an independent button. Use ToggleGroup when the items form a selection.

Import

import { ButtonGroup } from "@/components/ui/button-group";

Shipped as editable source in src/components/ui/button-group.tsx in both apps. Copy the implementation below when moving it to another project. Copy the complete example from Source code for all imports and state. Add "use client" when using hooks or event handlers. See installation and theming for project setup.

Component source

The complete implementation is included in both apps. It uses the React, Radix, Lucide, and shared-core dependencies already installed in Apex. Keep your project’s semantic theme tokens when reusing it.

src/components/ui/button-group.tsx

import type { ComponentProps } from "react";
import { cn } from "@dashboardpack/core/lib/utils";
export function ButtonGroup({
  className,
  orientation = "horizontal",
  ...props
}: ComponentProps<"div"> & { orientation?: "horizontal" | "vertical" }) {
  return (
    <div
      role="group"
      className={cn(
        "inline-flex gap-1 rounded-lg border bg-background p-1",
        orientation === "vertical" && "flex-col",
        className,
      )}
      {...props}
    />
  );
}

API reference

Common props and defaults. Slot-specific props are named below; native elements also accept their standard HTML attributes. The component TypeScript definitions are the complete type reference.

ButtonGroup props
Prop	Type / Default	Description
orientation	`horizontal \| vertical` Default: horizontal	Direction of the action group.
aria-label	`string` Default: —	Accessible group name.
children	`ReactNode` Default: —	Buttons or other appropriate related controls.
className	`string` Default: —	Extend wrapper styles.

Build with these too

Button ToggleGroup