Toggle Group

A set of toggle buttons that work together for single or multiple selection modes

Single Selection (Text Alignment)

Selected: left

Multiple Selection (Text Formatting)

Selected: bold

Outline Variant

Ghost Variant

Current view: grid

Size Variants

Small

Medium (Default)

Large

Vertical Orientation

Default

Outline

Ghost

With Disabled Items

Social Actions (Multiple Selection)

Active: none

Disabled State

Text Editor Toolbar Example

Sample editor content would appear here...

Toggle Group Component

tsx

1"use client";
2import React, { useState } from "react";
3import { cn } from "@/lib/cn";
4
5interface ToggleGroupItem {
6  value: string;
7  label: string;
8  icon?: React.ReactNode;
9  disabled?: boolean;
10}