Button (bare)
button[listensCommand]@listenssoft/speechui-angularA 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 Angular kit…
Hold anywhere and say:“engage”
Props
- not set
import { Component, signal } from "@angular/core";import { ListensCommandDirective } from "@listenssoft/speechui-angular";
@Component({ selector: "demo-bare-button", imports: [ListensCommandDirective], template: ` <!-- On a native button, the command directive IS the bare button --> <button listensCommand="engage" listensLabel="Engage" class="my-pill-button" (click)="count.set(count() + 1)" > Engage ({{ count() }}) </button> `, styles: ` .my-pill-button { padding: 8px 18px; border-radius: 999px; border: 1px solid #888; background: transparent; font: inherit; cursor: pointer; } `,})export class DemoBareButton { count = signal(0);}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].
/* Same idea in any framework — plain CSS: */
button[listensCommand][data-listening] {
outline: 2px solid red;
}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
Angular inputs & outputs for @listenssoft/speechui-angular.
Inputs (directive: [listensCommand] on a native button)
| Input | Type | Default | Description |
|---|---|---|---|
listensCommand | string | — | The spoken command (the directive's bound value). When heard, the host element is click()ed. |
listensLabel | string | "" | Human-readable label for the page contract. |
Outputs
| Output | Type | Default | Description |
|---|---|---|---|
listensMatched | string | — | Emits the matched transcript when the command fires. |
Styling hooks
Styling hooks
| Hook | Type | Default | Description |
|---|---|---|---|
(none added) | — | — | The directive adds no classes or markup to its host. |
data-listening | attribute | — | Present on the host while the mic is open. |
Behavior notes
- Angular: There is no separate bare-button component:
[listensCommand]on a native<button>is the bare button. The same directive on any other clickable element performs that element's click.
