Button Group

TSX
"use client";

import { Pause, Play, RotateCcw, RotateCw } from "lucide-react";
import * as React from "react";

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

const episode = {
  show: "Shipping Notes",
  title: "Ep. 42: Pricing pages that convert",
  duration: 38 * 60 + 12,
};

const speeds = [1, 1.25, 1.5, 2];

function formatTime(seconds: number) {
  const minutes = Math.floor(seconds / 60);
  const rest = Math.floor(seconds % 60);
  return `${minutes}:${rest.toString().padStart(2, "0")}`;
}

export default function ButtonGroup01() {
  const [position, setPosition] = React.useState(754);
  const [playing, setPlaying] = React.useState(false);
  const [speedIndex, setSpeedIndex] = React.useState(0);
  const speed = speeds[speedIndex];

  React.useEffect(() => {
    if (!playing) return;
    const interval = window.setInterval(() => {
      setPosition((p) => Math.min(episode.duration, p + speed));
    }, 1000);
    return () => window.clearInterval(interval);
  }, [playing, speed]);

  React.useEffect(() => {
    if (position >= episode.duration) setPlaying(false);
  }, [position]);

  function seek(delta: number) {
    setPosition((p) => Math.min(episode.duration, Math.max(0, p + delta)));
  }

  const progress = (position / episode.duration) * 100;

  return (
    <div className="flex w-full max-w-sm flex-col gap-4 rounded-xl border border-border bg-card p-4 text-card-foreground">
      <div className="flex min-w-0 flex-col gap-0.5">
        <p className="text-xs text-muted-foreground">{episode.show}</p>
        <p className="truncate text-sm font-medium">{episode.title}</p>
      </div>
      <div className="flex flex-col gap-1.5">
        <div
          aria-hidden="true"
          className="h-1.5 overflow-hidden rounded-full bg-muted"
        >
          <div
            className="h-full rounded-full bg-primary transition-[width] duration-300 ease-out"
            style={{ width: `${progress}%` }}
          />
        </div>
        <div className="flex justify-between text-xs text-muted-foreground tabular-nums">
          <span>
            <span className="sr-only">Elapsed </span>
            {formatTime(position)}
          </span>
          <span>
            <span className="sr-only">Remaining </span>-
            {formatTime(episode.duration - position)}
          </span>
        </div>
      </div>
      <div className="flex flex-wrap items-center justify-between gap-2">
        <ButtonGroup aria-label="Playback">
          <Button
            variant="outline"
            size="icon"
            aria-label="Back 15 seconds"
            onClick={() => seek(-15)}
          >
            <RotateCcw aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            className="w-24"
            onClick={() => {
              if (position >= episode.duration) setPosition(0);
              setPlaying((p) => !p);
            }}
          >
            {playing ? (
              <Pause aria-hidden="true" data-icon="inline-start" />
            ) : (
              <Play aria-hidden="true" data-icon="inline-start" />
            )}
            {playing ? "Pause" : "Play"}
          </Button>
          <Button
            variant="outline"
            size="icon"
            aria-label="Forward 30 seconds"
            onClick={() => seek(30)}
          >
            <RotateCw aria-hidden="true" />
          </Button>
        </ButtonGroup>
        <ButtonGroup aria-label="Playback speed">
          <ButtonGroupText
            render={<span />}
            className="bg-background font-normal text-muted-foreground max-sm:hidden dark:bg-input/30"
          >
            Speed
          </ButtonGroupText>
          <Button
            variant="outline"
            className="w-14 tabular-nums"
            aria-label={`Playback speed ${speed}x. Change speed`}
            onClick={() => setSpeedIndex((i) => (i + 1) % speeds.length)}
          >
            {speed}x
          </Button>
        </ButtonGroup>
      </div>
    </div>
  );
}

TSX
"use client";

import { Layers, LocateFixed, Minus, Plus } from "lucide-react";
import * as React from "react";

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

const MIN_ZOOM = 3;
const MAX_ZOOM = 18;
const DEFAULT_ZOOM = 12;

const depots = [
  { name: "North pier", top: "28%", left: "22%" },
  { name: "Fish market", top: "44%", left: "58%" },
  { name: "Dry dock", top: "62%", left: "34%" },
  { name: "Ferry terminal", top: "22%", left: "64%" },
];

const pressedClass =
  "aria-pressed:bg-muted aria-pressed:text-foreground dark:aria-pressed:bg-input/60";

export default function ButtonGroup02() {
  const [zoom, setZoom] = React.useState(DEFAULT_ZOOM);
  const [located, setLocated] = React.useState(false);
  const [showDepots, setShowDepots] = React.useState(true);
  const gridSize = Math.round(32 * 1.2 ** (zoom - DEFAULT_ZOOM));

  return (
    <div className="relative h-72 w-full max-w-md overflow-hidden rounded-xl border border-border bg-muted">
      <div
        aria-hidden="true"
        className="absolute inset-0 bg-[linear-gradient(to_right,var(--border)_1px,transparent_1px),linear-gradient(to_bottom,var(--border)_1px,transparent_1px)] bg-center transition-[background-size] duration-200"
        style={{ backgroundSize: `${gridSize}px ${gridSize}px` }}
      />
      {showDepots
        ? depots.map((depot) => (
            <span
              key={depot.name}
              title={depot.name}
              aria-hidden="true"
              className="absolute size-3 -translate-1/2 rounded-full border-2 border-background bg-primary shadow-sm"
              style={{ top: depot.top, left: depot.left }}
            />
          ))
        : null}
      {located ? (
        <span
          aria-hidden="true"
          className="absolute top-1/2 left-1/2 flex size-4 -translate-1/2 items-center justify-center rounded-full bg-chart-2/30"
        >
          <span className="size-2 rounded-full bg-chart-2 ring-2 ring-background" />
        </span>
      ) : null}
      <div className="absolute bottom-4 left-4 rounded-lg bg-background/90 px-3 py-2 shadow-sm">
        <p className="text-sm font-medium">Harbor District</p>
        <p className="text-xs text-muted-foreground" aria-live="polite">
          {located
            ? "Centered on your location"
            : showDepots
              ? `${depots.length} depots in view`
              : "Depot layer hidden"}
        </p>
      </div>
      <div className="absolute top-4 right-4 flex flex-col gap-2">
        <ButtonGroup
          orientation="vertical"
          aria-label="Zoom"
          className="shadow-sm"
        >
          <Button
            variant="outline"
            size="icon"
            aria-label="Zoom in"
            disabled={zoom >= MAX_ZOOM}
            onClick={() => setZoom((z) => Math.min(MAX_ZOOM, z + 1))}
          >
            <Plus aria-hidden="true" />
          </Button>
          <ButtonGroupText
            aria-live="polite"
            className="justify-center bg-background px-0 py-1 text-xs tabular-nums dark:bg-input/30"
          >
            <span className="sr-only">Zoom level </span>
            {zoom}
          </ButtonGroupText>
          <Button
            variant="outline"
            size="icon"
            aria-label="Zoom out"
            disabled={zoom <= MIN_ZOOM}
            onClick={() => setZoom((z) => Math.max(MIN_ZOOM, z - 1))}
          >
            <Minus aria-hidden="true" />
          </Button>
        </ButtonGroup>
        <ButtonGroup
          orientation="vertical"
          aria-label="Map view"
          className="shadow-sm"
        >
          <Button
            variant="outline"
            size="icon"
            aria-label="Show my location"
            aria-pressed={located}
            onClick={() => {
              setLocated((l) => !l);
              if (!located) setZoom(15);
            }}
            className={pressedClass}
          >
            <LocateFixed aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            size="icon"
            aria-label="Show depot layer"
            aria-pressed={showDepots}
            onClick={() => setShowDepots((d) => !d)}
            className={pressedClass}
          >
            <Layers aria-hidden="true" />
          </Button>
        </ButtonGroup>
      </div>
    </div>
  );
}

TSX
"use client";

import { Check, Copy, RefreshCw } from "lucide-react";
import * as React from "react";

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

const tokens = ["k7Qm2x", "p9Lw4d", "t3Vn8r"];

export default function ButtonGroup03() {
  const [index, setIndex] = React.useState(0);
  const [copied, setCopied] = React.useState(false);
  const path = `acme.app/join/${tokens[index]}`;

  React.useEffect(() => {
    if (!copied) return;
    const timeout = window.setTimeout(() => setCopied(false), 2000);
    return () => window.clearTimeout(timeout);
  }, [copied]);

  async function handleCopy() {
    try {
      await navigator.clipboard?.writeText(`https://${path}`);
    } catch {
      // Clipboard access can be denied; the confirmation still reflects intent.
    }
    setCopied(true);
  }

  return (
    <div className="flex w-full max-w-md flex-col gap-2">
      <Label htmlFor="button-group-03-link">Workspace invite link</Label>
      <ButtonGroup className="w-full">
        <ButtonGroupText
          render={<span />}
          className="font-normal text-muted-foreground"
        >
          https://
        </ButtonGroupText>
        <Input
          id="button-group-03-link"
          readOnly
          value={path}
          className="font-mono text-xs md:text-xs"
          onFocus={(event) => event.currentTarget.select()}
        />
        <Button
          variant="outline"
          size="icon"
          aria-label="Generate a new link"
          onClick={() => {
            setIndex((i) => (i + 1) % tokens.length);
            setCopied(false);
          }}
        >
          <RefreshCw aria-hidden="true" />
        </Button>
        <Button
          variant="outline"
          onClick={handleCopy}
          aria-label={copied ? "Copied" : "Copy link"}
          className="sm:w-22 sm:justify-center"
        >
          {copied ? (
            <Check aria-hidden="true" data-icon="inline-start" />
          ) : (
            <Copy aria-hidden="true" data-icon="inline-start" />
          )}
          <span aria-hidden="true" className="hidden sm:inline">
            {copied ? "Copied" : "Copy"}
          </span>
        </Button>
      </ButtonGroup>
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {copied
          ? "Link copied. It expires in 7 days."
          : "Anyone with this link can join as a viewer."}
      </p>
    </div>
  );
}

TSX
"use client";

import {
  CalendarClock,
  Check,
  ChevronDown,
  Send,
  Timer,
  Undo2,
} from "lucide-react";
import * as React from "react";

import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const modes = [
  {
    value: "now",
    icon: Send,
    action: "Send now",
    hint: "Delivered to 2,418 subscribers immediately.",
    done: "Sent",
    confirmation: "Campaign sent to 2,418 subscribers.",
  },
  {
    value: "morning",
    icon: CalendarClock,
    action: "Send tomorrow",
    hint: "Scheduled for Friday at 8:00 AM, recipient time zone.",
    done: "Scheduled",
    confirmation: "Scheduled for Friday at 8:00 AM.",
  },
  {
    value: "optimal",
    icon: Timer,
    action: "Send at best time",
    hint: "Each subscriber gets it when they usually open email.",
    done: "Scheduled",
    confirmation: "Scheduled for each subscriber's best time.",
  },
];

export default function ButtonGroup04() {
  const [mode, setMode] = React.useState("now");
  const [sent, setSent] = React.useState(false);
  const current = modes.find((m) => m.value === mode) ?? modes[0];

  return (
    <div className="flex w-full max-w-sm flex-col items-start gap-2">
      <ButtonGroup aria-label="Send campaign">
        <Button
          disabled={sent}
          onClick={() => setSent(true)}
          className="disabled:opacity-100"
        >
          {sent ? (
            <Check aria-hidden="true" data-icon="inline-start" />
          ) : (
            <current.icon aria-hidden="true" data-icon="inline-start" />
          )}
          {sent ? current.done : current.action}
        </Button>
        <ButtonGroupSeparator className="bg-primary-foreground/25" />
        <DropdownMenu>
          <DropdownMenuTrigger
            render={
              <Button
                size="icon"
                aria-label="Choose when to send"
                disabled={sent}
                className="disabled:opacity-100"
              >
                <ChevronDown aria-hidden="true" />
              </Button>
            }
          />
          <DropdownMenuContent align="end" className="w-56">
            <DropdownMenuGroup>
              <DropdownMenuLabel>Delivery</DropdownMenuLabel>
              <DropdownMenuRadioGroup
                value={mode}
                onValueChange={(value) => setMode(value as string)}
              >
                {modes.map((m) => (
                  <DropdownMenuRadioItem
                    key={m.value}
                    value={m.value}
                    closeOnClick
                  >
                    <m.icon aria-hidden="true" />
                    {m.action}
                  </DropdownMenuRadioItem>
                ))}
              </DropdownMenuRadioGroup>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
      </ButtonGroup>
      <div className="flex min-h-6 items-center gap-2">
        <p className="text-xs text-muted-foreground" aria-live="polite">
          {sent ? current.confirmation : current.hint}
        </p>
        {sent ? (
          <Button variant="ghost" size="xs" onClick={() => setSent(false)}>
            <Undo2 aria-hidden="true" data-icon="inline-start" />
            Undo
          </Button>
        ) : null}
      </div>
    </div>
  );
}

TSX
"use client";

import { CircleCheck, CircleDot, GitPullRequestArrow } from "lucide-react";
import * as React from "react";

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

const filters = [
  { value: "open", label: "Open", icon: CircleDot, count: 14 },
  { value: "review", label: "In review", icon: GitPullRequestArrow, count: 5 },
  { value: "closed", label: "Closed", icon: CircleCheck, count: 128 },
];

export default function ButtonGroup05() {
  const [status, setStatus] = React.useState("open");
  const active = filters.find((f) => f.value === status) ?? filters[0];

  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      <ButtonGroup aria-label="Filter issues by status" className="w-full">
        {filters.map((filter) => {
          const selected = filter.value === status;
          return (
            <Button
              key={filter.value}
              variant="outline"
              aria-pressed={selected}
              onClick={() => setStatus(filter.value)}
              className="min-w-0 flex-1 shrink text-muted-foreground aria-pressed:bg-muted aria-pressed:text-foreground dark:aria-pressed:bg-input/60"
            >
              <filter.icon
                aria-hidden="true"
                data-icon="inline-start"
                className="hidden sm:block"
              />
              <span className="truncate">{filter.label}</span>
              <span
                className={
                  selected
                    ? "hidden rounded-md bg-background px-1.5 text-xs tabular-nums text-foreground shadow-xs sm:inline"
                    : "hidden rounded-md px-1.5 text-xs tabular-nums sm:inline"
                }
              >
                {filter.count}
              </span>
            </Button>
          );
        })}
      </ButtonGroup>
      <p className="text-sm text-muted-foreground" aria-live="polite">
        Showing {active.count} {active.label.toLowerCase()} issues in{" "}
        <span className="font-medium text-foreground">Billing v2</span>
      </p>
    </div>
  );
}

TSX
"use client";

import {
  AlignCenter,
  AlignLeft,
  AlignRight,
  Bold,
  Italic,
  Redo2,
  Strikethrough,
  Underline,
  Undo2,
} from "lucide-react";
import * as React from "react";

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

type Mark = "bold" | "italic" | "underline" | "strike";
type Align = "left" | "center" | "right";
type Format = { marks: Mark[]; align: Align };

const marks = [
  { value: "bold", label: "Bold", icon: Bold, className: "font-semibold" },
  { value: "italic", label: "Italic", icon: Italic, className: "italic" },
  {
    value: "underline",
    label: "Underline",
    icon: Underline,
    className: "underline underline-offset-4",
  },
  {
    value: "strike",
    label: "Strikethrough",
    icon: Strikethrough,
    className: "line-through",
  },
] as const;

const alignments = [
  {
    value: "left",
    label: "Align left",
    icon: AlignLeft,
    className: "text-left",
  },
  {
    value: "center",
    label: "Align center",
    icon: AlignCenter,
    className: "text-center",
  },
  {
    value: "right",
    label: "Align right",
    icon: AlignRight,
    className: "text-right",
  },
] as const;

const pressedClass =
  "aria-pressed:bg-muted aria-pressed:text-foreground dark:aria-pressed:bg-input/60";

export default function ButtonGroup06() {
  const [history, setHistory] = React.useState<Format[]>([
    { marks: ["bold"], align: "left" },
  ]);
  const [cursor, setCursor] = React.useState(0);
  const format = history[cursor];

  function commit(next: Format) {
    setHistory((prev) => [...prev.slice(0, cursor + 1), next]);
    setCursor((c) => c + 1);
  }

  function toggleMark(mark: Mark) {
    const has = format.marks.includes(mark);
    commit({
      ...format,
      marks: has
        ? format.marks.filter((m) => m !== mark)
        : [...format.marks, mark],
    });
  }

  const textClass = [
    ...marks
      .filter((m) => format.marks.includes(m.value))
      .map((m) => m.className),
    alignments.find((a) => a.value === format.align)?.className,
  ].join(" ");

  return (
    <div className="flex w-full max-w-md flex-col overflow-hidden rounded-xl border border-border bg-card">
      <div className="border-b border-border bg-muted/40 p-2">
        <ButtonGroup aria-label="Text formatting" className="flex-wrap">
          <ButtonGroup aria-label="History">
            <Button
              variant="outline"
              size="icon-sm"
              aria-label="Undo"
              disabled={cursor === 0}
              onClick={() => setCursor((c) => c - 1)}
            >
              <Undo2 aria-hidden="true" />
            </Button>
            <Button
              variant="outline"
              size="icon-sm"
              aria-label="Redo"
              disabled={cursor === history.length - 1}
              onClick={() => setCursor((c) => c + 1)}
            >
              <Redo2 aria-hidden="true" />
            </Button>
          </ButtonGroup>
          <ButtonGroup aria-label="Text style">
            {marks.map((mark) => (
              <Button
                key={mark.value}
                variant="outline"
                size="icon-sm"
                aria-label={mark.label}
                aria-pressed={format.marks.includes(mark.value)}
                onClick={() => toggleMark(mark.value)}
                className={pressedClass}
              >
                <mark.icon aria-hidden="true" />
              </Button>
            ))}
          </ButtonGroup>
          <ButtonGroup aria-label="Alignment">
            {alignments.map((alignment) => (
              <Button
                key={alignment.value}
                variant="outline"
                size="icon-sm"
                aria-label={alignment.label}
                aria-pressed={format.align === alignment.value}
                onClick={() => {
                  if (format.align !== alignment.value) {
                    commit({ ...format, align: alignment.value });
                  }
                }}
                className={pressedClass}
              >
                <alignment.icon aria-hidden="true" />
              </Button>
            ))}
          </ButtonGroup>
        </ButtonGroup>
      </div>
      <p className={`p-4 text-sm leading-relaxed ${textClass}`}>
        Release notes ship every Thursday. Draft yours before noon so the docs
        team has time to review.
      </p>
    </div>
  );
}

TSX
"use client";

import {
  Check,
  CircleCheck,
  CircleX,
  MessageSquareWarning,
  Undo2,
  X,
} from "lucide-react";
import * as React from "react";

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

type Decision = "approve" | "changes" | "reject";

const decisions = [
  {
    value: "approve",
    label: "Approve",
    icon: Check,
    result: "Approved",
    resultIcon: CircleCheck,
    tone: "text-success",
  },
  {
    value: "changes",
    label: "Revise",
    icon: MessageSquareWarning,
    result: "Returned for changes",
    resultIcon: MessageSquareWarning,
    tone: "text-warning",
  },
  {
    value: "reject",
    label: "Reject",
    icon: X,
    result: "Rejected",
    resultIcon: CircleX,
    tone: "text-destructive",
  },
] as const;

export default function ButtonGroup07() {
  const [pending, setPending] = React.useState<Decision | null>(null);
  const [decided, setDecided] = React.useState<Decision | null>(null);

  React.useEffect(() => {
    if (!pending) return;
    const timeout = window.setTimeout(() => {
      setDecided(pending);
      setPending(null);
    }, 1200);
    return () => window.clearTimeout(timeout);
  }, [pending]);

  const outcome = decisions.find((d) => d.value === decided);

  return (
    <div className="flex w-full max-w-md flex-col gap-4 rounded-xl border border-border bg-card p-4">
      <div className="flex items-start justify-between gap-4">
        <div className="flex min-w-0 flex-col gap-0.5">
          <p className="text-sm font-medium">Team offsite catering</p>
          <p className="truncate text-xs text-muted-foreground">
            Expense EX-4821 · Submitted by Priya Raman
          </p>
        </div>
        <p className="text-sm font-medium tabular-nums">$1,240.00</p>
      </div>
      <div aria-live="polite">
        {outcome ? (
          <ButtonGroup aria-label="Review outcome">
            <ButtonGroupText className="bg-background font-normal dark:bg-input/30">
              <outcome.resultIcon
                aria-hidden="true"
                className={outcome.tone}
              />
              {outcome.result}
            </ButtonGroupText>
            <Button variant="outline" onClick={() => setDecided(null)}>
              <Undo2 aria-hidden="true" data-icon="inline-start" />
              Undo
            </Button>
          </ButtonGroup>
        ) : (
          <ButtonGroup
            aria-label="Review expense"
            aria-busy={pending !== null}
            className="w-full"
          >
            {decisions.map((decision) => {
              const isPending = pending === decision.value;
              return (
                <Button
                  key={decision.value}
                  variant="outline"
                  disabled={pending !== null}
                  onClick={() => setPending(decision.value)}
                  className="min-w-0 flex-1 shrink disabled:opacity-100 disabled:text-muted-foreground"
                >
                  {isPending ? (
                    <Spinner data-icon="inline-start" />
                  ) : (
                    <decision.icon
                      aria-hidden="true"
                      data-icon="inline-start"
                      className="hidden sm:block"
                    />
                  )}
                  <span className="truncate">{decision.label}</span>
                </Button>
              );
            })}
          </ButtonGroup>
        )}
      </div>
    </div>
  );
}

TSX
"use client";

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

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

const product = {
  name: "Merino crew sweater",
  variant: "Oatmeal, size M",
  price: 118,
  stock: 6,
};

const currency = new Intl.NumberFormat("en-US", {
  style: "currency",
  currency: "USD",
});

export default function ButtonGroup08() {
  const [quantity, setQuantity] = useState(1);
  const [added, setAdded] = useState(0);
  const available = product.stock - added;
  const soldOut = available === 0;

  return (
    <div className="flex w-full max-w-sm flex-col gap-4 rounded-xl border bg-card p-4 text-card-foreground">
      <div className="flex gap-3">
        <img
          src="/placeholder.svg"
          alt=""
          className="size-16 shrink-0 rounded-lg bg-muted object-cover"
        />
        <div className="flex min-w-0 flex-col gap-0.5">
          <span className="truncate text-sm font-medium">{product.name}</span>
          <span className="text-xs text-muted-foreground">{product.variant}</span>
          <span className="mt-1 text-sm font-medium tabular-nums">
            {currency.format(product.price)}
          </span>
        </div>
      </div>
      <div className="flex items-center gap-2">
        <ButtonGroup aria-label="Quantity">
          <Button
            variant="outline"
            size="icon"
            aria-label="Decrease quantity"
            disabled={soldOut || quantity <= 1}
            onClick={() => setQuantity((q) => Math.max(1, q - 1))}
          >
            <MinusIcon aria-hidden="true" />
          </Button>
          <ButtonGroupText
            aria-live="polite"
            className="min-w-10 justify-center bg-background tabular-nums"
          >
            {soldOut ? 0 : quantity}
          </ButtonGroupText>
          <Button
            variant="outline"
            size="icon"
            aria-label="Increase quantity"
            disabled={quantity >= available}
            onClick={() => setQuantity((q) => Math.min(available, q + 1))}
          >
            <PlusIcon aria-hidden="true" />
          </Button>
        </ButtonGroup>
        <Button
          className="flex-1"
          disabled={soldOut}
          onClick={() => {
            setAdded((count) => count + quantity);
            setQuantity(1);
          }}
        >
          <ShoppingBagIcon data-icon="inline-start" aria-hidden="true" />
          {soldOut
            ? "All in your bag"
            : `Add ${currency.format(product.price * quantity)}`}
        </Button>
      </div>
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {added > 0
          ? `${added} in your bag. ${
              soldOut ? "That was the last of this size." : "Free shipping on this order."
            }`
          : quantity >= available
            ? `Only ${available} left in stock.`
            : `${product.stock} in stock. Ships in 1–2 business days.`}
      </p>
    </div>
  );
}

TSX
"use client";

import {
  ArchiveIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  ClockIcon,
  MailOpenIcon,
  Trash2Icon,
  UndoIcon,
} from "lucide-react";
import { useState } from "react";

import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupText,
} from "@/components/ui/button-group";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

const messages = [
  {
    from: "Priya Raman",
    subject: "Q3 vendor contract — final redlines",
    preview:
      "Legal signed off on sections 4 and 7. The only open item is the renewal window.",
  },
  {
    from: "Stripe",
    subject: "Your payout of $4,812.40 is on its way",
    preview: "Funds should arrive in your account ending 6021 by Thursday.",
  },
  {
    from: "Marcus Lee",
    subject: "Offsite agenda draft",
    preview: "I pushed the design review to day two so we have time to prep.",
  },
];

const snoozeOptions = ["Later today", "Tomorrow morning", "Next Monday"];

export default function ButtonGroup09() {
  const [index, setIndex] = useState(0);
  const [status, setStatus] = useState<string | null>(null);
  const message = messages[index];

  return (
    <div className="flex w-full max-w-md flex-col overflow-hidden rounded-xl border bg-card text-card-foreground">
      <div
        className="flex flex-wrap items-center justify-between gap-2 border-b bg-muted/40 p-2"
      >
        <div className="flex items-center gap-2">
          <ButtonGroup aria-label="Organize">
            <Button
              variant="outline"
              size="icon-sm"
              aria-label="Archive"
              onClick={() => setStatus("Archived")}
            >
              <ArchiveIcon aria-hidden="true" />
            </Button>
            <Button
              variant="outline"
              size="icon-sm"
              aria-label="Mark as unread"
              onClick={() => setStatus("Marked as unread")}
            >
              <MailOpenIcon aria-hidden="true" />
            </Button>
            <Button
              variant="outline"
              size="icon-sm"
              aria-label="Delete"
              onClick={() => setStatus("Moved to trash")}
            >
              <Trash2Icon aria-hidden="true" />
            </Button>
          </ButtonGroup>
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button variant="outline" size="sm">
                  <ClockIcon data-icon="inline-start" aria-hidden="true" />
                  Snooze
                </Button>
              }
            />
            <DropdownMenuContent align="start">
              <DropdownMenuGroup>
                <DropdownMenuLabel>Snooze until</DropdownMenuLabel>
                {snoozeOptions.map((option) => (
                  <DropdownMenuItem
                    key={option}
                    onClick={() => setStatus(`Snoozed until ${option.toLowerCase()}`)}
                  >
                    {option}
                  </DropdownMenuItem>
                ))}
              </DropdownMenuGroup>
            </DropdownMenuContent>
          </DropdownMenu>
        </div>
        <ButtonGroup aria-label="Navigate messages">
          <ButtonGroupText className="bg-background px-2 text-xs text-muted-foreground tabular-nums">
            {index + 1} of {messages.length}
          </ButtonGroupText>
          <Button
            variant="outline"
            size="icon-sm"
            aria-label="Newer message"
            disabled={index === 0}
            onClick={() => {
              setIndex((i) => i - 1);
              setStatus(null);
            }}
          >
            <ChevronLeftIcon aria-hidden="true" />
          </Button>
          <Button
            variant="outline"
            size="icon-sm"
            aria-label="Older message"
            disabled={index === messages.length - 1}
            onClick={() => {
              setIndex((i) => i + 1);
              setStatus(null);
            }}
          >
            <ChevronRightIcon aria-hidden="true" />
          </Button>
        </ButtonGroup>
      </div>
      <div className="flex flex-col gap-1 p-4">
        <span className="text-xs text-muted-foreground">{message.from}</span>
        <span className="text-sm font-medium">{message.subject}</span>
        <p className="text-sm text-muted-foreground">{message.preview}</p>
      </div>
      <div
        aria-live="polite"
        className="flex min-h-10 items-center justify-between gap-2 border-t px-4 py-1.5 text-xs text-muted-foreground"
      >
        {status ? (
          <>
            <span>{status}</span>
            <Button variant="ghost" size="xs" onClick={() => setStatus(null)}>
              <UndoIcon data-icon="inline-start" aria-hidden="true" />
              Undo
            </Button>
          </>
        ) : (
          <span>Received today at 9:42 AM</span>
        )}
      </div>
    </div>
  );
}

TSX
"use client";

import {
  ChevronDownIcon,
  ExternalLinkIcon,
  GitBranchIcon,
  RocketIcon,
  ScrollTextIcon,
} from "lucide-react";
import { useRef, useState } from "react";

import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
  ButtonGroup,
  ButtonGroupSeparator,
} from "@/components/ui/button-group";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";

type Deployment = {
  id: string;
  branch: string;
  commit: string;
  message: string;
  age: string;
  production: boolean;
};

const initialDeployments: Deployment[] = [
  {
    id: "dpl_7fk2",
    branch: "main",
    commit: "a41c9e2",
    message: "fix(billing): round prorated credits",
    age: "12m ago",
    production: true,
  },
  {
    id: "dpl_6hq8",
    branch: "feat/usage-alerts",
    commit: "3be07d1",
    message: "feat(alerts): email when usage hits 80%",
    age: "1h ago",
    production: false,
  },
  {
    id: "dpl_5mz1",
    branch: "main",
    commit: "9d02f6a",
    message: "chore(deps): bump next to 16.1",
    age: "Yesterday",
    production: false,
  },
];

const newCommits = ["c58e1f0", "e2a94b7", "71d3c0e", "b09f5a2", "4ce8d31"];

export default function ButtonGroup10() {
  const [deployments, setDeployments] = useState(initialDeployments);
  const counter = useRef(0);

  const deploy = (
    source: Pick<Deployment, "branch" | "commit" | "message">,
    production: boolean,
  ) => {
    counter.current += 1;
    const next: Deployment = {
      ...source,
      id: `dpl_new${counter.current}`,
      age: "Just now",
      production,
    };
    setDeployments((list) =>
      [
        next,
        ...list.map((deployment) =>
          production ? { ...deployment, production: false } : deployment,
        ),
      ].slice(0, 5),
    );
  };

  const deployMain = (message: string, production = true) =>
    deploy(
      {
        branch: "main",
        commit: newCommits[counter.current % newCommits.length],
        message,
      },
      production,
    );

  const remove = (id: string) =>
    setDeployments((list) => list.filter((deployment) => deployment.id !== id));

  const promote = (id: string) =>
    setDeployments((list) =>
      list.map((deployment) => ({
        ...deployment,
        production: deployment.id === id,
      })),
    );

  return (
    <div className="flex w-full max-w-lg flex-col rounded-xl border bg-card text-card-foreground">
      <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 border-b px-4 py-3">
        <div className="flex min-w-0 flex-col">
          <span className="text-sm font-medium">Deployments</span>
          <span className="truncate text-xs text-muted-foreground">
            acme-dashboard · Production
          </span>
        </div>
        <ButtonGroup aria-label="Deploy">
          <Button size="sm" onClick={() => deployMain("Deploy main to production")}>
            <RocketIcon data-icon="inline-start" aria-hidden="true" />
            Deploy
          </Button>
          <ButtonGroupSeparator className="bg-primary-foreground/20" />
          <DropdownMenu>
            <DropdownMenuTrigger
              render={
                <Button size="icon-sm" aria-label="More deploy options">
                  <ChevronDownIcon aria-hidden="true" />
                </Button>
              }
            />
            <DropdownMenuContent align="end">
              <DropdownMenuItem
                onClick={() => deployMain("Deploy main without build cache")}
              >
                Deploy without build cache
              </DropdownMenuItem>
              <DropdownMenuItem
                onClick={() => deployMain("Preview deploy of main", false)}
              >
                Deploy to preview only
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </ButtonGroup>
      </div>
      <ul className="flex flex-col divide-y">
        {deployments.map((deployment) => (
          <li
            key={deployment.id}
            className="flex flex-wrap items-center justify-between gap-x-3 gap-y-2 px-4 py-3"
          >
            <div className="flex min-w-0 flex-1 basis-full flex-col gap-1 sm:basis-0">
              <div className="flex items-center gap-2">
                <span className="min-w-0 truncate text-sm font-medium">
                  {deployment.message}
                </span>
                {deployment.production ? (
                  <Badge variant="secondary" className="shrink-0">
                    Current
                  </Badge>
                ) : null}
              </div>
              <span className="flex min-w-0 items-center gap-1.5 text-xs text-muted-foreground">
                <GitBranchIcon className="size-3 shrink-0" aria-hidden="true" />
                <span className="truncate">{deployment.branch}</span>
                <span aria-hidden="true">·</span>
                <code className="font-mono">{deployment.commit}</code>
                <span aria-hidden="true">·</span>
                <span className="shrink-0">{deployment.age}</span>
              </span>
            </div>
            <ButtonGroup aria-label={`Actions for ${deployment.commit}`}>
              <Button variant="outline" size="icon-sm" aria-label="Visit deployment">
                <ExternalLinkIcon aria-hidden="true" />
              </Button>
              <Button variant="outline" size="icon-sm" aria-label="View build logs">
                <ScrollTextIcon aria-hidden="true" />
              </Button>
              <DropdownMenu>
                <DropdownMenuTrigger
                  render={
                    <Button
                      variant="outline"
                      size="icon-sm"
                      aria-label="More actions"
                    >
                      <ChevronDownIcon aria-hidden="true" />
                    </Button>
                  }
                />
                <DropdownMenuContent align="end">
                  <DropdownMenuItem
                    disabled={deployment.production}
                    onClick={() => promote(deployment.id)}
                  >
                    {deployment.production
                      ? "Serving production"
                      : "Promote to production"}
                  </DropdownMenuItem>
                  <DropdownMenuItem
                    onClick={() => deploy(deployment, deployment.production)}
                  >
                    Redeploy
                  </DropdownMenuItem>
                  <DropdownMenuSeparator />
                  <DropdownMenuItem
                    variant="destructive"
                    disabled={deployment.production}
                    onClick={() => remove(deployment.id)}
                  >
                    Delete deployment
                  </DropdownMenuItem>
                </DropdownMenuContent>
              </DropdownMenu>
            </ButtonGroup>
          </li>
        ))}
      </ul>
    </div>
  );
}

TSX
"use client";

import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { useState } from "react";

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

type View = "day" | "week" | "month";

const views: { value: View; label: string }[] = [
  { value: "day", label: "Day" },
  { value: "week", label: "Week" },
  { value: "month", label: "Month" },
];

// Fixed "today" so the sample agenda always has something to show.
const today = new Date(2026, 8, 24);

const events = [
  { date: new Date(2026, 8, 22, 9, 30), title: "Sprint planning", calendar: "chart-1" },
  { date: new Date(2026, 8, 24, 11, 0), title: "Design review: onboarding", calendar: "chart-2" },
  { date: new Date(2026, 8, 24, 15, 30), title: "1:1 with Dana", calendar: "chart-3" },
  { date: new Date(2026, 8, 26, 10, 0), title: "Customer call — Northwind", calendar: "chart-1" },
  { date: new Date(2026, 9, 1, 14, 0), title: "Quarterly business review", calendar: "chart-4" },
  { date: new Date(2026, 9, 8, 16, 0), title: "Security training", calendar: "chart-2" },
];

const dotClass: Record<string, string> = {
  "chart-1": "bg-chart-1",
  "chart-2": "bg-chart-2",
  "chart-3": "bg-chart-3",
  "chart-4": "bg-chart-4",
};

function startOfWeek(date: Date) {
  const start = new Date(date.getFullYear(), date.getMonth(), date.getDate());
  start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
  return start;
}

function getRange(anchor: Date, view: View): [Date, Date] {
  if (view === "day") {
    const start = new Date(anchor.getFullYear(), anchor.getMonth(), anchor.getDate());
    return [start, new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1)];
  }
  if (view === "week") {
    const start = startOfWeek(anchor);
    return [start, new Date(start.getFullYear(), start.getMonth(), start.getDate() + 7)];
  }
  const start = new Date(anchor.getFullYear(), anchor.getMonth(), 1);
  return [start, new Date(anchor.getFullYear(), anchor.getMonth() + 1, 1)];
}

function shift(anchor: Date, view: View, step: number) {
  const next = new Date(anchor);
  if (view === "day") next.setDate(next.getDate() + step);
  if (view === "week") next.setDate(next.getDate() + step * 7);
  if (view === "month") next.setMonth(next.getMonth() + step, 1);
  return next;
}

const dayFormat = new Intl.DateTimeFormat("en-US", {
  weekday: "short",
  month: "short",
  day: "numeric",
});
const shortFormat = new Intl.DateTimeFormat("en-US", { month: "short", day: "numeric" });
const monthFormat = new Intl.DateTimeFormat("en-US", { month: "long", year: "numeric" });
const timeFormat = new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit" });

function formatTitle(start: Date, end: Date, view: View) {
  if (view === "day") return dayFormat.format(start);
  if (view === "month") return monthFormat.format(start);
  const last = new Date(end.getFullYear(), end.getMonth(), end.getDate() - 1);
  return `${shortFormat.format(start)} – ${shortFormat.format(last)}`;
}

export default function ButtonGroup11() {
  const [view, setView] = useState<View>("week");
  const [anchor, setAnchor] = useState(today);
  const [start, end] = getRange(anchor, view);
  const visible = events.filter((event) => event.date >= start && event.date < end);

  return (
    <div className="flex w-full max-w-md flex-col rounded-xl border bg-card text-card-foreground">
      <div className="flex flex-wrap items-center justify-between gap-3 border-b p-3">
        <div className="flex items-center gap-2">
          <ButtonGroup aria-label="Change period">
            <Button
              variant="outline"
              size="icon-sm"
              aria-label={`Previous ${view}`}
              onClick={() => setAnchor((a) => shift(a, view, -1))}
            >
              <ChevronLeftIcon aria-hidden="true" />
            </Button>
            <Button
              variant="outline"
              size="sm"
              onClick={() => setAnchor(today)}
            >
              Today
            </Button>
            <Button
              variant="outline"
              size="icon-sm"
              aria-label={`Next ${view}`}
              onClick={() => setAnchor((a) => shift(a, view, 1))}
            >
              <ChevronRightIcon aria-hidden="true" />
            </Button>
          </ButtonGroup>
          <h3 className="text-sm font-medium tabular-nums" aria-live="polite">
            {formatTitle(start, end, view)}
          </h3>
        </div>
        <ButtonGroup aria-label="Calendar view">
          {views.map((option) => (
            <Button
              key={option.value}
              variant="outline"
              size="sm"
              aria-pressed={view === option.value}
              onClick={() => setView(option.value)}
              className="text-muted-foreground aria-pressed:bg-muted aria-pressed:text-foreground dark:aria-pressed:bg-input/60"
            >
              {option.label}
            </Button>
          ))}
        </ButtonGroup>
      </div>
      {visible.length > 0 ? (
        <ul className="flex flex-col gap-1 p-2">
          {visible.map((event) => (
            <li
              key={event.title}
              className="flex items-center gap-3 rounded-lg px-2 py-2 hover:bg-muted/60"
            >
              <span
                className={`size-2 shrink-0 rounded-full ${dotClass[event.calendar]}`}
                aria-hidden="true"
              />
              <span className="min-w-0 flex-1 truncate text-sm">{event.title}</span>
              <span className="shrink-0 text-xs text-muted-foreground tabular-nums">
                {view === "day"
                  ? timeFormat.format(event.date)
                  : `${shortFormat.format(event.date)}, ${timeFormat.format(event.date)}`}
              </span>
            </li>
          ))}
        </ul>
      ) : (
        <p className="px-4 py-8 text-center text-sm text-muted-foreground">
          Nothing scheduled. Enjoy the focus time.
        </p>
      )}
    </div>
  );
}

TSX
"use client";

import { ChevronDownIcon, RotateCwIcon, XIcon } from "lucide-react";
import { type FormEvent, useId, useState } from "react";

import { Button } from "@/components/ui/button";
import { ButtonGroup } from "@/components/ui/button-group";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

type Role = "Admin" | "Member" | "Viewer";

const roles: { value: Role; description: string }[] = [
  { value: "Admin", description: "Manage billing and members" },
  { value: "Member", description: "Create and edit projects" },
  { value: "Viewer", description: "Read-only access" },
];

type Invite = { email: string; role: Role; sent: string };

const initialInvites: Invite[] = [
  { email: "jordan@northwind.io", role: "Member", sent: "Sent 2 days ago" },
  { email: "sam.okafor@northwind.io", role: "Viewer", sent: "Sent 5 days ago" },
];

export default function ButtonGroup12() {
  const id = useId();
  const [email, setEmail] = useState("");
  const [role, setRole] = useState<Role>("Member");
  const [invites, setInvites] = useState(initialInvites);
  const [error, setError] = useState<string | null>(null);

  const onSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    const value = email.trim().toLowerCase();
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
      setError("Enter a valid work email, like name@company.com.");
      return;
    }
    if (invites.some((invite) => invite.email === value)) {
      setError(`${value} already has a pending invite.`);
      return;
    }
    setInvites((list) => [{ email: value, role, sent: "Sent just now" }, ...list]);
    setEmail("");
    setError(null);
  };

  return (
    <div className="flex w-full max-w-md flex-col gap-4 rounded-xl border bg-card p-4 text-card-foreground">
      <form onSubmit={onSubmit} noValidate className="flex flex-col gap-2">
        <Label htmlFor={`${id}-email`}>Invite teammates</Label>
        <div className="flex flex-col gap-2 sm:flex-row">
          <ButtonGroup className="w-full min-w-0">
            <Input
              id={`${id}-email`}
              type="email"
              autoComplete="off"
              placeholder="name@northwind.io"
              value={email}
              aria-invalid={error ? true : undefined}
              aria-describedby={error ? `${id}-error` : undefined}
              onChange={(event) => {
                setEmail(event.target.value);
                if (error) setError(null);
              }}
              className="min-w-0"
            />
            <DropdownMenu>
              <DropdownMenuTrigger
                render={
                  <Button variant="outline" aria-label={`Role: ${role}`}>
                    {role}
                    <ChevronDownIcon data-icon="inline-end" aria-hidden="true" />
                  </Button>
                }
              />
              <DropdownMenuContent align="end" className="w-56">
                <DropdownMenuRadioGroup
                  value={role}
                  onValueChange={(value) => setRole(value as Role)}
                >
                  {roles.map((option) => (
                    <DropdownMenuRadioItem
                      key={option.value}
                      value={option.value}
                      closeOnClick
                    >
                      <span className="flex flex-col">
                        <span>{option.value}</span>
                        <span className="text-xs text-muted-foreground">
                          {option.description}
                        </span>
                      </span>
                    </DropdownMenuRadioItem>
                  ))}
                </DropdownMenuRadioGroup>
              </DropdownMenuContent>
            </DropdownMenu>
          </ButtonGroup>
          <Button type="submit">Send invite</Button>
        </div>
        {error ? (
          <p id={`${id}-error`} role="alert" className="text-xs text-destructive">
            {error}
          </p>
        ) : null}
      </form>
      <div className="flex flex-col gap-2">
        <span className="text-xs font-medium text-muted-foreground">
          Pending invites ({invites.length})
        </span>
        {invites.length > 0 ? (
          <ul className="flex flex-col divide-y rounded-lg border">
            {invites.map((invite) => (
              <li
                key={invite.email}
                className="flex items-center justify-between gap-3 px-3 py-2"
              >
                <div className="flex min-w-0 flex-col">
                  <span className="truncate text-sm">{invite.email}</span>
                  <span className="text-xs text-muted-foreground">
                    {invite.role} · {invite.sent}
                  </span>
                </div>
                <ButtonGroup aria-label={`Manage invite for ${invite.email}`}>
                  <Button
                    variant="outline"
                    size="icon-sm"
                    aria-label={`Resend invite to ${invite.email}`}
                    onClick={() =>
                      setInvites((list) =>
                        list.map((item) =>
                          item.email === invite.email
                            ? { ...item, sent: "Resent just now" }
                            : item,
                        ),
                      )
                    }
                  >
                    <RotateCwIcon aria-hidden="true" />
                  </Button>
                  <Button
                    variant="outline"
                    size="icon-sm"
                    aria-label={`Revoke invite for ${invite.email}`}
                    onClick={() =>
                      setInvites((list) =>
                        list.filter((item) => item.email !== invite.email),
                      )
                    }
                    className="hover:text-destructive"
                  >
                    <XIcon aria-hidden="true" />
                  </Button>
                </ButtonGroup>
              </li>
            ))}
          </ul>
        ) : (
          <p className="rounded-lg border border-dashed px-3 py-4 text-center text-xs text-muted-foreground">
            No pending invites. New teammates appear here until they accept.
          </p>
        )}
      </div>
    </div>
  );
}