For the complete documentation index, see llms.txt. Markdown variants are available by appending .md to any URL or sending an Accept: text/markdown header. An agent skill is available at /.well-known/agent-skills/site-skill.md.
43
Sponsor

Button Group

PreviousNext

Groups a set of related buttons together.

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

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.com/r/button-group.json

Usage

import { ButtonGroup } from "@/components/ui/button-group/button-group";
<ButtonGroup>
  <Button variant="outline">One</Button>
  <Button variant="outline">Two</Button>
</ButtonGroup>

Examples

Orientation

import { MinusIcon, PlusIcon } from "lucide-react";

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

export function ButtonGroupOrientation() {

Size

import { PlusIcon } from "lucide-react";

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

export function ButtonGroupSize() {

Nested

import { AudioLinesIcon, PlusIcon } from "lucide-react";

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

Separator

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

Split

import { PlusIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,

Input

import { SearchIcon } from "lucide-react";

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

Select

"use client";

import { ArrowRightIcon } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";

Popover

import { BotIcon, ChevronDownIcon } from "lucide-react";

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

Input Group

"use client";

import { AudioLinesIcon, PlusIcon } from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";

Dropdown Menu

"use client";

import {
  AlertTriangleIcon,
  CheckIcon,
  ChevronDownIcon,

RTL

To enable right-to-left support, see the RTL guide.

"use client";

import {
  ArchiveIcon,
  ArrowLeftIcon,
  CalendarPlusIcon,

API Reference

ButtonGroup

The ButtonGroup component is a container that groups related buttons together with consistent styling.

PropTypeDefault
orientation"horizontal" | "vertical""horizontal"
classNamestring-