Toggle buttons and toggle groups for editor toolbars, view switchers and filters, with a sliding active indicator. Single or multiple selection with full keyboard support.
"use client";
import * as React from "react";
import { IconAlignCenter, IconAlignLeft, IconAlignRight, IconBold, IconItalic, IconUnderline } from "@tabler/icons-react";
import { Toggle, ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
const primitivePreviewCardSurfaceFrameClass = cn(
"relative isolate overflow-hidden rounded-2xl",
"border",
);
const primitivePreviewCardSurfaceLightClass = cn(
"border-black/[0.08] bg-[#f4f4f5]",
"[box-shadow:0_1px_2px_rgba(0,0,0,.06),0_8px_24px_-12px_rgba(0,0,0,.08)]",
);
const primitivePreviewCardSurfaceClass = cn(
primitivePreviewCardSurfaceFrameClass,
primitivePreviewCardSurfaceLightClass,
// Full static `dark:bg-[#0a0a0b]` kept for Tailwind content scan - same as
// PRIMITIVE_PREVIEW_CANVAS_DARK_BG / PRIMITIVE_PREVIEW_CANVAS_DARK.
"dark:border-white/[0.06] dark:bg-[#0a0a0b] dark:[box-shadow:0_1px_2px_rgba(0,0,0,.4),0_8px_24px_-12px_rgba(0,0,0,.6)]",
);
const wensityCardSurfaceClass = primitivePreviewCardSurfaceClass;
function PreviewRow({ children }: { children: React.ReactNode }) {
return (
<div className="flex flex-wrap items-center justify-center gap-3">
{children}
</div>
);
}
function PreviewPanel({
children,
className,
title,
subtitle,
}: {
children: React.ReactNode;
className?: string;
title?: string;
subtitle?: string;
}) {
return (
<div
className={cn(
wensityCardSurfaceClass,
"w-full max-w-md p-5 sm:p-6",
className,
)}
>
{title ? (
<div className="mb-5 border-b border-[var(--border)] pb-4">
<p className="text-sm font-semibold tracking-[-0.015em] text-[var(--foreground)]">
{title}
</p>
{subtitle ? (
<p className="mt-1 text-[12px] leading-[1.5] text-[var(--muted-foreground)]">
{subtitle}
</p>
) : null}
</div>
) : null}
{children}
</div>
);
}
export function TogglePreview() {
const [bold, setBold] = React.useState(true);
const [align, setAlign] = React.useState("left");
return (
<PreviewPanel
title="Text formatting"
subtitle="Press toggles stay responsive with clear on/off states."
>
<div className="space-y-4">
<PreviewRow>
<Toggle pressed={bold} onPressedChange={setBold} aria-label="Bold">
<IconBold stroke={2} />
Bold
</Toggle>
<Toggle variant="outline" aria-label="Italic">
<IconItalic stroke={2} />
Italic
</Toggle>
<Toggle variant="soft" aria-label="Underline">
<IconUnderline stroke={2} />
Underline
</Toggle>
</PreviewRow>
<PreviewRow>
<ToggleGroup
type="single"
value={align}
onValueChange={(next) => typeof next === "string" && setAlign(next)}
variant="outline"
aria-label="Text alignment"
>
<ToggleGroupItem value="left" aria-label="Align left">
<IconAlignLeft stroke={2} />
Left
</ToggleGroupItem>
<ToggleGroupItem value="center" aria-label="Align center">
<IconAlignCenter stroke={2} />
Center
</ToggleGroupItem>
<ToggleGroupItem value="right" aria-label="Align right">
<IconAlignRight stroke={2} />
Right
</ToggleGroupItem>
</ToggleGroup>
</PreviewRow>
</div>
</PreviewPanel>
);
}
export default function Demo() {
return <TogglePreview />;
}