Component

Call Controls

A meeting bottom toolbar with composable round control buttons — mic, camera, screen-share, reactions, and a destructive leave/end button. Fully accessible with role="toolbar", aria-label, and aria-pressed for toggleable controls.

Basic bar

Compose any set of CallControlButton elements inside CallControls. The leave button usestone="destructive".

Toggled (muted) states

Pass pressed to mark a control as toggled. Use tone="active" when on and tone="destructive" when muted/off to signal the disabled state with red.

Mic: on · Camera: on · Screen: not sharing

With leave button

The leave/end button always uses tone="destructive". It is not toggleable and therefore receives no pressed prop.

Installation

$pnpm add @refraction-ui/react

Usage

tsx

import { CallControls, CallControlButton } from '@refraction-ui/react'

export function MeetingBar() {
  const [micOn, setMicOn] = React.useState(true)

  return (
    <CallControls>
      <CallControlButton
        label={micOn ? 'Mute mic' : 'Unmute mic'}
        tone={micOn ? 'active' : 'destructive'}
        pressed={micOn}
        onClick={() => setMicOn(v => !v)}
      />
      <CallControlButton label="Share screen" />
      <CallControlButton label="Leave" tone="destructive" />
    </CallControls>
  )
}

CallControls props

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	Visual size of the toolbar and its buttons.
`className`	`string`	--	Additional CSS classes to apply to the toolbar container.
`children`	`React.ReactNode`	--	CallControlButton elements to render inside the toolbar.

CallControlButton props

Prop	Type	Default	Description
`label`	`string`	--	Accessible label (aria-label) and screen-reader text.
`icon`	`React.ReactNode`	--	Icon node rendered inside the button.
`tone`	`'default' \| 'active' \| 'destructive'`	`'default'`	Visual tone: default (neutral), active (on/highlighted), destructive (leave/muted).
`pressed`	`boolean`	--	Toggleable state — adds aria-pressed. Omit for non-toggleable controls.
`size`	`'sm' \| 'md'`	`'md'`	Visual size of the button.
`onClick`	`() => void`	--	Click handler.