Toggle

A two-state button that can be on or off. Presses recede into the surface with seam depth motion.

tsx

import { Bold } from "lucide-react"

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

export default function ToggleDemo() {
  return (
    <Toggle aria-label="Toggle bold">
      <Bold />
    </Toggle>
  )
}

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

Notes

Controlled via pressed / onPressedChange, uncontrolled via defaultPressed.
Renders a native <button> with aria-pressed; the on-state is styled via Base UI's data-[pressed] attribute.

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