CngxSpeakButton
projects/ui/speak/speak-button.ts
Import#
import { CngxSpeakButton } from '@cngx/ui/speak'
Description#
Ready-made speaker button that connects to a CngxSpeak directive
via an explicit [speakRef] input - no ancestor injection.
Ships with a speaker/stop SVG icon and CSS custom properties for full
theming control. Include speak-button-theme.scss for automatic Material
theme integration.
Basic usage
<span [cngxSpeak]="text" #tts="cngxSpeak">{{ text }}</span>
<cngx-speak-button [speakRef]="tts" />Material theme integration
@use '@cngx/themes/material/speak-button-theme' as speak;
@include speak.theme($theme);Metadata#
Host#
Index#
Inputs
HostBindings
Inputs#
HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-speak-button--speaking] | speakRef().speaking() |
Default visuals for CngxSpeakButton. The host carries
.cngx-speak-button and renders a single __btn child with an
inner __icon. The active / speaking accent deliberately uses
warm orange rather than --cngx-color-primary so the speak
surface reads as ambient feedback, not a primary call-to-action -
brand-wide overrides target --cngx-speak-btn-active-color
directly.
State modifiers
--speaking- fills the button with--cngx-speak-btn-speaking- bg(orange) and paints the icon white
On .cngx-speak-button__btn:
:hover- swaps to--cngx-speak-btn-active-colorfor icon and border, and to--cngx-speak-btn-hover-bgfor the surface
Slots
.cngx-speak-button__btn- the actual<button>; carries shape, border, transition, and hover/active state painting.cngx-speak-button__icon- inner glyph, nudged +1px on the inline axis to optically center against the rounded surface
Inheritance
--cngx-speak-btn-bg->--cngx-color-surface--cngx-speak-btn-hover-bg->--cngx-speak-btn-bg->--cngx-color-surface--cngx-speak-btn-speaking-bg->--cngx-speak-btn-active-color
Pair with
@cngx/themes/material/speak-button-theme- Material 3 icon-button surface
Index#
State / Active
State / Hover
State / Speaking
Layout
Surface
<color>oklch(1 0 0)Resting background. Falls back through --cngx-color-surface.
Motion
<time>0.15sTransition duration for the state-color crossfade.
State / Active
<color>oklch(0.72 0.18 70)Accent color of the speaking / hover state. Warm orange by
design - independent of --cngx-color-primary.
State / Hover
State / Speaking
<color>oklch(1 0 0)Icon color while actively speaking.
<color>oklch(0.72 0.18 70)Background while actively speaking - filled with the orange accent for unmistakable feedback.