Mode Selector

The composer's mode toggle — agent / plan / ask, or permission modes — compacted to footer height. A thin recipe over Toggle Group: the debossed well with the active mode risen as the embossed key.

tsx

import { Bot, HelpCircle, ListTodo } from "lucide-react"

import { ModeOption, ModeSelector } from "@/registry/seam/ui/mode-selector"

export default function ModeSelectorDemo() {
  return (
    <ModeSelector defaultValue={["agent"]}>
      <ModeOption value="agent" aria-label="Agent mode">
        <Bot className="size-3.5" /> Agent
      </ModeOption>
      <ModeOption value="plan" aria-label="Plan mode">
        <ListTodo className="size-3.5" /> Plan
      </ModeOption>
      <ModeOption value="ask" aria-label="Ask mode">
        <HelpCircle className="size-3.5" /> Ask
      </ModeOption>
    </ModeSelector>
  )
}

bunx --bun @seamui/cli@latest add mode-selector

Notes

Base UI Toggle Group semantics: value={["agent"]} / onValueChange, single-select by default; arrow keys rove between options.
Press feedback, haptics, and the reduced-motion variant all come from the Toggle foundation — this recipe only sets sizing.

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