Label button
ListensLabelButton@listenssoft/speechui-react-nativeA 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 Native kit…
Hold anywhere and say:“launch”
Props
- default command
- not set
import { ListensLabelButton } from "@listenssoft/speechui-react-native";import { View, Text } from "react-native";import { useState } from "react";
function Demo() { const [count, setCount] = useState(0); return ( <View style={{ gap: 8, alignItems: "flex-start" }}> <ListensLabelButton label="Launch" command="launch" onPress={() => setCount((c) => c + 1)} /> <Text>Launched {count} times</Text> </View> );}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 Native kit…
Hold anywhere and say:“confirm”
import { ListensLabelButton } from "@listenssoft/speechui-react-native";import { View, Text } from "react-native";import { useState } from "react";
function Demo() { const [last, setLast] = useState("—"); return ( <View style={{ gap: 8, alignItems: "flex-start" }}> <ListensLabelButton label="Confirm order" command="confirm" listeningContent='say “confirm”' onPress={() => setLast(new Date().toLocaleTimeString())} /> <Text>Last confirmed: {last}</Text> </View> );}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 Native props for @listenssoft/speechui-react-native.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
listeningContent | string | command | Shown instead of the label while the mic is open. |
disabled | boolean | — | Disables the button. |
Extra props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | The button text; the spoken command fallback. |
command | string | label | The spoken command that fires onPress. |
onPress | () => void | — | Press handler — fires for taps and speech alike. |
style | StyleProp<ViewStyle> | — | Style override for the button container. |
textStyle | StyleProp<TextStyle> | — | Style override for the label text. |
Styling hooks
Style props and theme keys
| Hook | Type | Default | Description |
|---|---|---|---|
style / textStyle | StyleProp | — | Direct overrides. |
theme.buttonFace / theme.onButton / theme.buttonBorder | token | — | Default chrome colors from the active ListensTheme. |
Behavior notes
- React Native: Holding directly on a button via the hold-anywhere surface still fires its onPress on release (native can't cancel a child's press); the mic button avoids the issue. See the hold-to-talk guide.
