Component

Toggle Group

A set of two-state buttons that can be toggled on or off, styled with brutalist flat borders and hard offsets. Built on Radix UI Toggle Group primitive.

Preview

Installation

pnpm dlx brutx@latest add toggle-group

Usage

import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"
import { AlignLeft, AlignCenter, AlignRight } from "lucide-react"

<ToggleGroup type="single" defaultValue="left">
  <ToggleGroupItem value="left" aria-label="Align left">
    <AlignLeft className="h-4 w-4 stroke-[3]" />
  </ToggleGroupItem>
  <ToggleGroupItem value="center" aria-label="Align center">
    <AlignCenter className="h-4 w-4 stroke-[3]" />
  </ToggleGroupItem>
  <ToggleGroupItem value="right" aria-label="Align right">
    <AlignRight className="h-4 w-4 stroke-[3]" />
  </ToggleGroupItem>
</ToggleGroup>

Examples

Outline Group

Use variant="outline" to style all items as outlines.

Disabled Items

Specify disabled inside ToggleGroup to lock the entire toolbar.

API Reference

ComponentDescription
ToggleGroupContext root container accepting group configuration props like type and variant.
ToggleGroupItemIndividual toolbar buttons mapping click selections.

Accessibility

Keyboard Navigation Rules:

  • Tab: Moves keyboard focus into the toggle group (focuses first or active item).
  • ArrowRight / ArrowDown: Moves focus to the next group item button.
  • ArrowLeft / ArrowUp: Moves focus to the previous group item button.
  • Space / Enter: Selects/toggles the currently focused item button.