Toggle button & group
button[listensToggleButton] · listens-toggle-button-group@listenssoft/speechui-angularPress-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 Angular kit…
Hold anywhere and say:“week”“month”“day”
import { Component, signal } from "@angular/core";import { ListensToggleButtonComponent, ListensToggleButtonGroupComponent,} from "@listenssoft/speechui-angular";
@Component({ selector: "demo-toggle-buttons", imports: [ListensToggleButtonComponent, ListensToggleButtonGroupComponent], template: ` <div style="display: grid; gap: 8px; justify-items: start"> <listens-toggle-button-group> <button listensToggleButton label="Day" [checked]="view() === 'Day'" (checkedChange)="$event && view.set('Day')" ></button> <button listensToggleButton label="Week" [checked]="view() === 'Week'" (checkedChange)="$event && view.set('Week')" ></button> <button listensToggleButton label="Month" [checked]="view() === 'Month'" (checkedChange)="$event && view.set('Month')" ></button> </listens-toggle-button-group> <span>Showing: {{ view() }}</span> </div> `,})export class DemoToggleButtons { view = signal("Day");}A single toggle button
Outside a group it's an independent pressed state — speaking the command toggles it on and off.
Loading the Angular kit…
Hold anywhere and say:“mute”
Props
- default command
- default false
import { Component } from "@angular/core";import { ListensToggleButtonComponent } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-toggle-button-single", imports: [ListensToggleButtonComponent], template: ` <button listensToggleButton label="Mute" command="mute" [(checked)]="muted" ></button> `,})export class DemoToggleButtonSingle { muted = false;}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
Angular inputs & outputs for @listenssoft/speechui-angular.
button[listensToggleButton] inputs
| Input | Type | Default | Description |
|---|---|---|---|
listeningContent | string | command | Text shown while the mic is open. |
disabled | boolean | false | Disables the button. |
The selector is an attribute on a native <button> so the group's adjacent-sibling CSS applies. Mutual exclusivity is coordinated by the parent listens-toggle-button-group (children inject it), not by a group id.
button[listensToggleButton] extra inputs
| Input | Type | Default | Description |
|---|---|---|---|
checked | boolean | false | Two-way bindable — [(checked)]. |
label | string | "" | Button text; the command fallback. |
command | string | label | The spoken command that activates the button. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
checkedChange | boolean | — | Emits the next pressed state — the [(checked)] channel. |
Styling hooks
CSS hooks
| Hook | Type | Default | Description |
|---|---|---|---|
.listens-toggle-button / .listens-toggle-button-group | class | — | Same classes as React; the attribute selector keeps the native button element. |
data-checked / data-listening | attribute | — | State attributes for styling. |
