Toggle button & group

ListensToggleButton · ListensToggleButtonGroup@listenssoft/speechui-react

Press-to-activate buttons; grouped, they form a mutually-exclusive segmented control you can address by voice.

Say a button's label and it activates. Inside a group, activating one deactivates the others — a segmented control (“Day / Week / Month”) whose segments are each addressable by voice.

Exclusive group (segmented control)

Loading the React kit…

Hold anywhere and say:“week”“month”“day”

React

import {  ListensToggleButton,  ListensToggleButtonGroup,} from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() {  const [view, setView] = useState("Day");  const button = (label) => (    <ListensToggleButton      label={label}      group="view"      checked={view === label}      onChange={(checked) => checked && setView(label)}    />  );  return (    <div style={{ display: "grid", gap: 8, justifyItems: "start" }}>      <ListensToggleButtonGroup>        {button("Day")}        {button("Week")}        {button("Month")}      </ListensToggleButtonGroup>      <span>Showing: {view}</span>    </div>  );}

A single toggle button

Outside a group it's an independent pressed state — speaking the command toggles it on and off.

Loading the React kit…

Hold anywhere and say:“mute”

Props

listeningContent
default command
disabled
not set

React

Updates as you tick props

import { ListensToggleButton } from "@listenssoft/speechui-react";import { useState } from "react";
// Outside a group, a toggle button is an independent pressed/unpressed state.function Demo() {  const [muted, setMuted] = useState(false);  return (    <ListensToggleButton      label="Mute"      command="mute"      checked={muted}      onChange={setMuted}    />  );}

What you can say

Say	Effect
“week”	Activates the “Week” button; in a group, the others deactivate.
“…switch to week view…”	Also matches (contains), claims permitting.
“mute (on a lone button)”	Toggles the pressed state each time it's heard (with the ~1s cooldown between fires).

In a group, a spoken command activates its button but never deactivates it — speech re-selecting the active segment is a no-op, matching how segmented controls behave by pointer.

API reference

React props for @listenssoft/speechui-react.

ListensToggleButton props

Prop	Type	Default	Description
`listeningContent`	`ReactNode`	`command`	Content shown while the mic is open.

ListensToggleButton extra props

Prop	Type	Default	Description
`label`*	`string`	—	Button text; the spoken command fallback.
`command`	`string`	`label`	The spoken command that activates the button.
`checked`	`boolean`	—	Controlled pressed state. Pair with onChange.
`onChange`	`(checked: boolean) => void`	—	Called with the next pressed state — click or speech.
`group`	`string`	—	Mutual-exclusion group id: buttons sharing the same group uncheck each other when one activates. The visual joining comes from ListensToggleButtonGroup; the exclusivity comes from this id.
`…ButtonHTMLAttributes (minus onChange)`	`button props`	—	disabled, className, style and the rest are forwarded to the native <button>.
`classNames`	`ListensToggleButtonClassNames`	—	Per-part class overrides (content). Each is appended after the component's own classes, so your rules win without extra specificity.

ListensToggleButtonGroup props

Prop	Type	Default	Description
`children`*	`ReactNode`	—	The toggle buttons to lay out as one segmented control (shared border, 1px dividers, no gaps).
`className`	`string`	—	Extra class name(s) on the group container.
`style`	`CSSProperties`	—	Inline style on the group container.

Styling hooks

classNames parts and CSS classes

Hook	Type	Default	Description
`.listens-toggle-button`	`class`	—	Each button. data-checked marks the active segment.
`.listens-toggle-button-group`	`class`	—	The segmented container (shared border, dividers).
`classNames.content / .listens-toggle-button-content`	`class`	—	The inner content wrapper rendered while listening.
`--listens-segment-on / --listens-segment-on-border`	`token`	—	Active-segment fill and border.

Behavior notes

React: Exclusivity is keyed on the group string, so buttons can be exclusive even without the visual group wrapper (or across separate wrappers).