Voice Mode Fab – Code

Implementation
VoiceModeFab Props

import { VoiceModeFab } from "@servicetitan/anvil2-rn";

function App() {
  return <VoiceModeFab state="idle" onPress={startVoice} />;
}

Common Examples

The component has three states, discriminated on state. The host owns all voice state and transport; VoiceModeFab renders the control and reports presses.

Collapsed

idle is a plain dark circle — voice is available but not running. active is the same circle with a blue presence glow, meaning Atlas is listening. Both take a single onPress.

<VoiceModeFab state="idle" onPress={startVoice} />
<VoiceModeFab state="active" onPress={expand} />

Expanded

The control strip: a status label plus mic-mute, stop, and collapse. Those three are required — each appears in every frame of the design, and an absent handler would render a control that looks live and does nothing. A speaker control is available on top, and renders only when the isSpeakerMuted / onToggleSpeakerMuted pair is wired — they are optional as a unit, never half-set.

<VoiceModeFab
  state="expanded"
  label="Talking"
  isMicMuted={micMuted}
  onToggleMicMuted={() => setMicMuted((m) => !m)}
  onStop={endVoice}
  onCollapse={() => setState("active")}
/>

Wiring onToggleSpeakerMuted adds the Atlas-audio control:

<VoiceModeFab
  state="expanded"
  label="Talking"
  isMicMuted={micMuted}
  onToggleMicMuted={() => setMicMuted((m) => !m)}
  isSpeakerMuted={speakerMuted}
  onToggleSpeakerMuted={() => setSpeakerMuted((m) => !m)}
  onStop={endVoice}
  onCollapse={() => setState("active")}
/>

onStop and onCollapse are not interchangeable. Collapsing returns to active with voice still running; stopping ends voice mode entirely. The two controls sit next to each other in the strip, so wiring them to the same handler is an easy mistake with very different consequences for the user.

label is caller-supplied so the host can localize it and reflect its own state (“Talking”, “Listening”, …). The kit owns only the action names.

Accessibility

Every control is a button with an explicit accessible name.
The collapsed control’s name changes with state — “Start voice mode” when idle, “Voice mode controls” when active. The glow is purely visual, so the name is the only signal a screen-reader user gets.
The mute controls carry their state in their name (“Mute microphone” / “Unmute microphone”) rather than a checked state — the two together would contradict, announcing an unmuted mic as “Mute microphone, not selected”.
Each mute control also shows its state visually: the glyph crosses out and its tint turns critical, so a muted channel is not announced-only.
Built-in action labels are English until the kit gains an i18n layer; label is already caller-supplied.

<VoiceModeFab state="active" onPress={expand} />

`VoiceModeFab` Props

Discriminated on state. It does not forward remaining React Native props.

Collapsed — `state: "idle" | "active"`

"idle" | "active"

required

idle = voice available, not running. active = listening, collapsed (renders the presence glow).

() => void

required

Starts voice mode (from idle) or expands the control strip (from active).

Expanded — `state: "expanded"`

"expanded"

required

Renders the control strip instead of the circle.

string

required

Status text, e.g. “Talking”. Caller-supplied so the host can localize it.

boolean

required

Whether the user’s microphone is muted. Controlled.

() => void

required

Fired when the mic-mute control is pressed.

boolean

Whether Atlas’s spoken output is muted. Controlled. Required together with onToggleSpeakerMuted — the two are typed as a pair, so the control can never render without the state that names it.

() => void

Fired when the Atlas-audio control is pressed. Wiring it adds that control to the strip; without it the strip is mic, stop and collapse — the canonical design.

() => void

required

Ends voice mode entirely.

() => void

required

Collapses back to active without ending voice mode.

Shared

string

Opt-in telemetry id. When set under Anvil2RNTelemetryProvider, each press emits a press event with meta.action (start, expand, toggleMicMuted, toggleSpeakerMuted, stop, collapse).

string

Test hook forwarded to the root element.

​Common Examples

​Collapsed

​Expanded

​Accessibility

​VoiceModeFab Props

​Collapsed — state: "idle" | "active"

​Expanded — state: "expanded"

​Shared

Common Examples

Collapsed

Expanded

Accessibility

`VoiceModeFab` Props

Collapsed — `state: "idle" | "active"`

Expanded — `state: "expanded"`

Shared