Label button
ListensLabelButton@listenssoft/speechui-reactA styled button that fires when its command is heard — “launch” clicks it.
The speech path performs a real click on the underlying button, so a type="submit" button submits its form exactly as a pointer click would. While the mic is open the button can swap its content to a spoken hint via listeningContent.
Bringing your own design system? The bare button is this control with zero styling and zero markup.
Basic button
Loading the React kit…
Hold anywhere and say:“launch”
Props
- default command
- not set
- not set
import { ListensLabelButton } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [count, setCount] = useState(0); return ( <div style={{ display: "grid", gap: 8, justifyItems: "start" }}> <ListensLabelButton label="Launch" command="launch" onClick={() => setCount((c) => c + 1)} /> <span>Launched {count} time{count === 1 ? "" : "s"}</span> </div> );}A hint while listening
listeningContent replaces the button's content while the mic is open — the button itself tells the user what to say.
Loading the React kit…
Hold anywhere and say:“confirm”
import { ListensLabelButton } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [last, setLast] = useState("—"); return ( <div style={{ display: "grid", gap: 8, justifyItems: "start" }}> <ListensLabelButton label="Confirm order" command="confirm" listeningContent={<em>say “confirm”</em>} onClick={() => setLast(new Date().toLocaleTimeString())} /> <span>Last confirmed: {last}</span> </div> );}What you can say
| Say | Effect |
|---|---|
| “launch” | Fires the button once (a real click on the underlying element). |
| “…ready to launch now…” | Also fires — matching is contains, not starts-with, unless another control claimed the phrase first. |
| “launch … (again within ~1s)” | Ignored: a per-command cooldown swallows the interim re-deliveries of one utterance. Repeating after a brief pause fires again. |
Buttons match anywhere in the phrase but respect claims: if a value control claimed the transcript with a starts-with match (say, a text field named “launch window”), the button stays quiet.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | ReactNode | command | Content shown while the mic is open — a good place for “say: launch”. |
normalContent | ReactNode | — | Custom content when not listening (instead of the plain label text). |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | The button text; also the spoken command when command is omitted. |
command | string | label | The spoken command that clicks the button. |
onClick | (event: MouseEvent) => void | — | Click handler — fires for pointer clicks and speech-triggered clicks alike. |
type | "button" | "submit" | "reset" | "button" | Forwarded to the native button; a speech match on submit submits the form. |
…ButtonHTMLAttributes | button props | — | disabled, className, aria-* and the rest are forwarded to the native <button>. |
classNames | ListensLabelButtonClassNames | — | Per-part class overrides (content). Each is appended after the component's own classes, so your rules win without extra specificity. |
Styling hooks
classNames parts and CSS classes
| Hook | Type | Default | Description |
|---|---|---|---|
classNames.content / .listens-label-button-content | class | — | The inner content wrapper rendered while listening. |
.listens-label-button | class | — | The button element. data-listening is present while the mic is open. |
--listens-button-face / --listens-on-button / --listens-button-border | token | — | The button's default chrome colors. |
