Shadcn.io is not affiliated with official shadcn/ui
Record Button
Recording state-machine button — circle ↔ square icon morph inside, with a destructive-tinted pulsing ring around the button while recording, for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Record Button preview
The universal hardware-record button language, in shadcn form. A circular button with a filled dot at rest; click and the dot morphs into a square (the universal stop icon) while a destructive-tinted ring pulses outward around the button. Click again to stop. The pulse is tied to recording state, not ambient — when the button isn't recording, it sits quietly. Perfect for voice memos, video capture, screen recording, podcast apps, or AI voice agents. Built on top of the shadcn Button so every size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the record-button button into my projectRelated Components
Long Press Button
Hold to confirm
Pulse Button
Pulsing attention rings
Success Button
Success checkmark state
Shake Button
Triggered error shake
Icon Button
Icon with active state
Ripple Button
Material click ripple
FAQ
Was this page helpful?
Sign in to leave feedback.
Pulse Button
Attention-grabbing button with pulsing rings that radiate outward for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Ripple Button
Material Design ripple effect button with expanding circles from click point for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.