Toggle Group

Buttons 7

About

A row of pill-shaped buttons for turning one or more related options on and off, like bold/italic/underline formatting controls or single-select alignment pickers.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Toggle Group to your project and fits it to your theme.

Code

How Toggle Group is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ToggleGroup from "@/components/ui/toggle-group";
import { useState } from "react";
import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Italic,
  Underline,
} from "lucide-react";

export default function ToggleGroupDemo() {
  const [marks, setMarks] = useState<string[]>(["bold"]);
  const [align, setAlign] = useState<string[]>(["left"]);

  return (
    <div className="flex w-full max-w-[520px] flex-col gap-4">
      <div className="flex flex-wrap items-center gap-3">
        <ToggleGroup
          label="Text style"
          value={marks}
          onValueChange={setMarks}
          items={[
            { value: "bold", label: "Bold", icon: Bold, iconOnly: true },
            { value: "italic", label: "Italic", icon: Italic, iconOnly: true },
            {
              value: "underline",
              label: "Underline",
              icon: Underline,
              iconOnly: true,
            },
          ]}
        />
        <ToggleGroup
          label="Alignment"
          type="single"
          value={align}
          onValueChange={setAlign}
          items={[
            {
              value: "left",
              label: "Align left",
              icon: AlignLeft,
              iconOnly: true,
            },
            {
              value: "center",
              label: "Align centre",
              icon: AlignCenter,
              iconOnly: true,
            },
            {
              value: "right",
              label: "Align right",
              icon: AlignRight,
              iconOnly: true,
            },
          ]}
        />
      </div>
      <div className="rounded-2xl bg-surface-sunken p-4">
        <p
          className="text-[14px] leading-normal text-ink"
          style={{
            fontWeight: marks.includes("bold") ? 700 : 400,
            fontStyle: marks.includes("italic") ? "italic" : "normal",
            textDecoration: marks.includes("underline") ? "underline" : "none",
            textAlign:
              (align[0] as "left" | "center" | "right" | undefined) ?? "left",
          }}
        >
          The consignment left Rotterdam at 06:10 and is on schedule for Lyon.
        </p>
      </div>
    </div>
  );
}