CommandToggles

Pinned commands for the leftActions slot of the composer. One command is active at a time; clicking it again clears it, and onChange receives null. Pass value and onChange to control it, or defaultValue to let it keep its own choice. The kit only shows the choice: add the command to the message yourself in onSend. Each button reports aria-pressed, description becomes a tooltip on hover and keyboard focus that is also the accessible description, and disabled keeps a command visible but inert. On narrow composers the row scrolls sideways instead of wrapping.

Getting Started
$pnpm add @sinups/ai-kit @mantine/core @mantine/hooks @tabler/icons-react
Examples
In the composer
API reference
Prop
Type
Required
commands
CommandToggle[]
Yes
value
string | null
No
Id of the active command, `null` when none is active; controlled
defaultValue
string | null
No
Command active initially when uncontrolled, none by default
onChange
(id: string | null) => void
No
Called with the picked command, or with `null` when the active one is clicked again
labels
Partial<CommandTogglesLabels>
No
Overrides of the default English labels
className
string
No
Class name added to the root element
style
React.CSSProperties
No
Inline styles added to the root element