ButtonGroup

A container for grouping related icon buttons with shared background and consistent styling. Perfect for toolbars and action bars.

Button Group Sizes

Small
28px (iconSmall)
size="small"
Default
32px (icon)
(no size prop)
Large
40px, icon 20px
size="large"

Media Toolbar

Image, GIF, and emoji picker buttons

Props:
{ tooltip: "enabled" }

Reorder Actions

Move up, move down, delete buttons

Props:
{ conditional: true }

Text Formatting

Rich text editor toolbar

Props:
{ active: "boolean" }

Text Alignment

Paragraph alignment options

Props:
{ size: "small" }

With Separators

Visual dividers between button groups

Props:
{ withSeparator: true }

Disabled State

Buttons with disabled prop

Props:
{ disabled: true }

Quick Actions

Common action buttons

Props:
{ size: "default" }

Mask Icons

Using iconUrl for custom SVG icons

Props:
{ iconUrl: "string" }

Multiple Groups

Compose toolbar layout

Props:
{ layout: "flex" }

Without Tooltips

Disable tooltips for specific items

Props:
{ disableTooltip: true }

Top Tooltips

Change tooltip placement

Props:
{ tooltipSide: ""top"" }

Mixed Active States

Some buttons active, others not

Props:
{ active: "boolean[]" }

Usage Example

import { ButtonGroup, ButtonGroupItem } from "@/components/ui/button-group";
import { Image, Film, Smile } from "lucide-react";

// Basic usage
<ButtonGroup>
  <ButtonGroupItem icon={<Image />} tooltip="Add image" />
  <ButtonGroupItem icon={<Film />} tooltip="Add video" />
  <ButtonGroupItem icon={<Smile />} tooltip="Add emoji" />
</ButtonGroup>

// With custom SVG icons (mask)
<ButtonGroup>
  <ButtonGroupItem iconUrl="/icons/image.svg" tooltip="Add image" />
  <ButtonGroupItem iconUrl="/icons/gif.svg" tooltip="Add GIF" />
</ButtonGroup>

// With active state
<ButtonGroup>
  <ButtonGroupItem icon={<Bold />} tooltip="Bold" active />
  <ButtonGroupItem icon={<Italic />} tooltip="Italic" />
</ButtonGroup>

// Different sizes
<ButtonGroup size="small">...</ButtonGroup>
<ButtonGroup size="default">...</ButtonGroup>
<ButtonGroup size="large">...</ButtonGroup>