Button (bare)
ListensButton@listenssoft/speechui-reactA plain native button that responds to speech — zero kit markup, zero kit styles. Yours to design.
The bare primitives exist for apps with their own design system: Tailwind, Material, CSS modules, anything. ListensButton renders exactly one native <button> (a Pressable on React Native) with no classes, no wrapper, and no injected look — but it still speaks the full page contract, still respects claims, and still fires on its command. While the mic is open it carries a data-listening attribute for you to style.
The styled sibling is the label button.
Your styles, our speech
The pill styling here is the sample's own — the kit adds nothing.
Loading the React kit…
Hold anywhere and say:“engage”
Props
- not set
import { ListensButton } from "@listenssoft/speechui-react";import { useState } from "react";
function Demo() { const [count, setCount] = useState(0); return ( <ListensButton command="engage" label="Engage" onClick={() => setCount((c) => c + 1)} style={{ padding: "8px 18px", borderRadius: 999, border: "1px solid #888", background: "transparent", font: "inherit", cursor: "pointer", }} > Engage ({count}) </ListensButton> );}Styling the listening state
The data-listening attribute appears while the mic is open — with Tailwind that's the data-listening: variant; in plain CSS, [data-listening].
Loading the React kit…
Hold anywhere and say:“warp speed”
import { ListensButton } from "@listenssoft/speechui-react";
// With Tailwind, style the listening state via the data-listening attribute:function Demo() { return ( <ListensButton command="warp speed" label="Warp speed" className="rounded-full border px-4 py-2 data-listening:ring-2 data-listening:ring-red-500" onClick={() => console.log("engaged")} > Warp speed </ListensButton> );}What you can say
| Say | Effect |
|---|---|
| “engage” | Clicks the button (a real click event — type="submit" submits its form). |
| “…make it so, engage…” | Also fires (contains match), unless another control claimed the phrase. |
Identical trigger behavior to the label button: contains match, claims respected, ~1s cooldown per command against interim re-delivery.
API reference
React props for @listenssoft/speechui-react.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
command | string | label | The spoken command that clicks the button. |
label | string | — | Human-readable label for the page contract (and the command fallback). Not rendered — your children are the visible content. |
…ButtonHTMLAttributes | button props | — | children, onClick, className, style, type, disabled — the element is a plain <button>, so everything native applies. |
Styling hooks
Styling hooks
| Hook | Type | Default | Description |
|---|---|---|---|
(none added) | — | — | No kit classes, no wrapper, no injected look. Style the element yourself. |
data-listening | attribute | — | Present while the mic is open — Tailwind's data-listening: variant, or [data-listening] in CSS. |
