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.
0
Sponsor

Button Group

PreviousNext

Groups a set of related buttons together.

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

export function ButtonGroupDemo() {
  return (
    <ButtonGroup>

Installation

$ pnpm dlx shadcn@latest add https://shadcn-cssinjs.vercel.app/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>

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-