Component

Voice Pill

Floating speaker indicator for voice-driven interfaces with intensity-aware pulse rings and a mute action. Exported from the single package for each framework: @refraction-ui/react and @refraction-ui/astro.

Examples

Live speaker state

Alex is responding

Current voice intensity is 65%.

AlexListening...
Animate
Speaker

Installation

$pnpm add @refraction-ui/react

Usage

tsx
import { VoicePill } from '@refraction-ui/react'

export function InterviewOverlay({ intensity, muted, toggleMute }) {
  return (
    <VoicePill
      speaker="ai"
      label="Alex"
      sub="Listening..."
      intensity={intensity}
      muted={muted}
      onToggleMute={toggleMute}
      position="bottom-center"
    />
  )
}

Props

PropTypeDefaultDescription
speaker'ai' | 'user' | string'ai'Speaker key used for defaults and data-speaker theming.
labelstring--Primary speaker label announced by assistive technology.
substring--Optional subtitle, such as a listening state or partial transcript.
intensitynumber0Voice intensity from 0 to 1 used to scale pulse rings.
mutedbooleanfalseSets the mute toggle state.
onToggleMute() => void--Renders an accessible mute button when provided.
position'inline' | 'top-start' | 'top-center' | 'top-end' | 'bottom-start' | 'bottom-center' | 'bottom-end' | 'left-start' | 'left-center' | 'left-end' | 'right-start' | 'right-center' | 'right-end''bottom-center'Viewport placement with safe-area inset support, or inline embedding.
avatarReactNode--Optional custom avatar content.
classNamestring--Additional CSS classes.