Toggle Group

A set of two-state buttons in a debossed well — the pressed one rises out of it as an embossed white key.

tsx

"use client"

import { AlignCenter, AlignLeft, AlignRight } from "lucide-react"

import { Toggle } from "@/registry/seam/ui/toggle"
import { ToggleGroup } from "@/registry/seam/ui/toggle-group"

export default function ToggleGroupDemo() {
  return (
    <ToggleGroup defaultValue={["left"]}>
      <Toggle value="left" aria-label="Align left">
        <AlignLeft />
      </Toggle>
      <Toggle value="center" aria-label="Align center">
        <AlignCenter />
      </Toggle>
      <Toggle value="right" aria-label="Align right">
        <AlignRight />
      </Toggle>
    </ToggleGroup>
  )
}

bunx --bun @seamui/cli@latest add toggle-group

Notes

Pass multiple to allow more than one pressed toggle at a time. Control with value / onValueChange (an array of pressed values).
The well itself is static — depth comes from the shadow-well deboss and each Toggle's embossed pressed state.

Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.