Record Button

InstallationCopy Anchor Link

$ pnpm dlx shadcn@latest add @videorc/record-button

It brings Button with it.

UsageCopy Anchor Link

import { RecordButton } from "@/components/record-button";

<RecordButton onClick={toggleRecording} state={session} />

state is where the session stands, and comes in from your app: idle, starting after the click, running once it records or streams, and stopping while it finishes. The button picks its glyph, lights up and says each state's words. Pass your own words for any state in labels ("End livestream" while on air, "Force stop" after a stop that drags on).

<RecordButton labels={{ running: "End livestream" }} state={session} />

Every state's words are laid out in the same spot and only the current one shows, so the button is as wide as its longest words and never changes width as the session moves on.

Use it for Record and the button that stops the session, and nothing else: lit red only ever means record or live. Delete stays a destructive Button, and Go Live… stays the chrome primary beside it.

ExamplesCopy Anchor Link

StatesCopy Anchor Link

Starting and stopping answer from the click: the button is lit, takes no click, keeps its focus and doesn't dim. Only a running session's glow breathes. Blocked is a disabled button, flat and dimmed; say why with Disabled reason.

In the transportCopy Anchor Link

The Studio's transport puts Record, with its Space key, beside Go Live…. While a session runs, one stop button takes the row. While Go Live… runs its checks, Record is off.

ThemingCopy Anchor Link

It's polished the way the default button's chrome is: a bright band, a dark horizon just below the middle and the light coming back at the foot. Every stop keeps the white label at 4.5:1 or more in both themes, so the shine is in the bands, never a brighter face. The glow is a layer of its own that breathes on opacity alone, so a session that runs for hours never repaints the button. Under reduced motion, it holds steady. Increase Contrast adds an edge around it.

KeyboardCopy Anchor Link

A shortcut for Record belongs to the page, not to the button. Show it inside with Shortcut Keys.

AccessibilityCopy Anchor Link

It's a one-shot action whose words change ("Record", then "Stop recording"), so it takes no aria-pressed. While starting or stopping, it's aria-disabled and stays focusable, so keyboard focus isn't lost under the user's hands. Announce the session's state in a status region, such as a Status Badge with role="status", not on the button.

API referenceCopy Anchor Link

Every Button prop except variant and children, plus:

RECORD_BUTTON_LABELS holds each state's default words.