Control Baton
experimentalShows whether the agent or the person has control, and lets the person take over and hand back with a note the agent receives.
- AI
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add control-batonnpm packages installed: class-variance-authority.
import { ControlBaton } from "@/components/ui/control-baton";Agent Working
Person Has Control
Agent Needs You
Shared
Compact
Standalone
<ControlBaton>
| Prop | Type | Default |
|---|---|---|
activityWhat the agent is doing. Defaults to the surface's latest call. | ReactNode | — |
agentName | string | — |
announceAnnounce changes of control. Defaults to on only outside a surface, which announces its own. | boolean | — |
holderRequired outside an | ControlHolder | — |
labels | Partial<ControlBatonLabels> | — |
note
| "optional" | "off" | "optional" |
onHandBack | (note: string | undefined) => void | — |
onTakeOver | () => void | — |
reasonWhy the agent handed over. Read from the surface when omitted. | string | null | — |
size | "default" | "compact" | "default" |
Plus every attribute of <div> except children.
A named group whose status is a sentence — who has control, and why when the agent asked for help — never the colour of the presence dot alone. Outside an AgentSurface the status line is itself a polite live region present from first paint; inside one it is not, since the surface already announces the change and two regions would say it twice. There is one action button whose label and purpose follow the holder, so focus stays on it as control changes. Hand back… opens a labelled note field and moves focus into it; Ctrl/⌘+Enter hands back, Escape cancels, and either returns focus to the button. If control moves elsewhere while the note is open, the note closes and focus returns to the button rather than falling to the page. The baton is marked data-agent-ui, so using it never counts as taking over by input.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes