VoiceOrb

Server component, no client JSUnstable

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { VoiceOrb } from '@nizivo/react/unstable/voice-orb';

export function VoiceOrbExample(): JSX.Element {
  return (
    <div style={{ display: 'flex', flexWrap: 'wrap', alignItems: 'flex-start', gap: 24 }}>
      <VoiceOrb state="idle" />
      <VoiceOrb state="listening">“Which products sold out last week?”</VoiceOrb>
      <VoiceOrb state="speaking" />
    </div>
  );
}

ImportCopy Anchor Link

import { VoiceOrb } from '@nizivo/react/unstable/voice-orb';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css and @nizivo/react/css/icon-button.css
import '@nizivo/react/css/voice-orb.css';

Static or interactiveCopy Anchor Link

Server. No client JavaScript: the control is an IconButtonStatic (IconButton without its tooltip) that calls onToggle. How to choose.

StateCopy Anchor Link

state is idle, listening or speaking. The label carries it, in a polite live region, and the button changes from Start talking (the mic) to Stop. The orb and the waveform are decoration; both stand still under Reduced motion.

CaptionsCopy Anchor Link

Put what was heard, and what the assistant says, in the children: voice needs a text twin.

The orbCopy Anchor Link

The design's orb is a shader: pass GlowOrb as orb (orb={<GlowOrb state={state} level={level} />}) and it grows with the voice. Without it the orb is drawn with CSS gradients; orb takes any picture in its place, hidden from assistive technology.

PropsCopy Anchor Link

Other exportsCopy Anchor Link

VoiceOrbLabels type

import type { VoiceOrbLabels } from '@nizivo/react/unstable/voice-orb'

VoiceOrb's own strings (§16.4): serialisable, English defaults.

Name	Type	Default	Description
idlerequired	string	'Tap to talk'
listeningrequired	string	'Listening…'
speakingrequired	string	'Speaking…'
startrequired	string	'Start talking'	The button's name while idle.
stoprequired	string	'Stop'	The button's name while listening or speaking.

VoiceOrbProps type

import type { VoiceOrbProps } from '@nizivo/react/unstable/voice-orb'

The props of VoiceOrb, listed above.

VoiceState type

import type { VoiceState } from '@nizivo/react/unstable/voice-orb'

What the voice assistant is doing: idle, listening or speaking.

type VoiceState = "idle" | "listening" | "speaking"

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-glow-orb, .nz-voice-orb, .nz-voice-orb-bar, .nz-voice-orb-button, .nz-voice-orb-captions, .nz-voice-orb-label, .nz-voice-orb-orb, .nz-voice-orb-sphere, .nz-voice-orb-wave.

AccessibilityCopy Anchor Link

These parts are interactive. Each gets the focus outline and touch-action rule from @nizivo/react/css/base.css (the nz.base layer), so the floor survives a restyle:

• voice-orb-button: draws the focus outline itself on keyboard focus.

KeyboardCopy Anchor Link

To be written.