VoiceNote

Record a voice note in one button. The microphone opens into Stop and the take, whose bars follow your voice while Stop swells with it. Stop, and Stop is swallowed by the take, which becomes a note you can play: it fills with the primary plastic as it plays. × deletes it and everything folds back into the microphone.

Feel Your voice is visibly in the button while you speak, and the take becomes the thing you play.

Or let the agent fetch it: get_component("voice-note") on the Echo MCP server.

Installation

npx echo-ui-cli add voice-note

First time? Run npx echo-ui-cli init once — it sets the project up, and add refuses to run before it.

At a glance

Version: 0.3.0
Weight: 6.2 KB · 39.0 KB with what it imports · 2.6 KB of CSS (minified and gzipped; React not counted)
Needs: hardware-button (Echo, brought with it), morph (Echo, brought with it)
Keyboard: Escape deletes the note.
Reduced motion: The states swap in place and Stop doesn't swell; the bars still show the level.
Sound: Each cap's own press. The recording itself is the only other sound.

Usage

tsx

import { VoiceNote } from "@/echo/voice-note";

<VoiceNote onRecorded={(audio, ms) => save(audio, ms)} />

Composition

VoiceNote → Morph → HardwareButton (the note uses `fill`)

Examples

Keep the recording

Send the Blob wherever notes go.

tsx

<VoiceNote onRecorded={(audio) => audio && upload(audio)} onDelete={clear} />

Accessibility

Every control is named: "Record a voice note", "Stop recording", "Play voice note, 0:07", "Delete voice note".
Recording, the note's length, deleting and a missing microphone are announced politely.
Escape deletes the note.
It asks for the microphone only when you press record, and says so if it isn't allowed.

Tested against WCAG 2.2 AA on every release:

axe — No axe violations, in the component's own gallery and on its page.
keyboard — Every action is reachable and operable from the keyboard alone.
focus-visible — Focus is visible on every focusable part, in normal and forced-colors mode.
forced-colors — State stays visible when the look's colours are replaced by the system's.
target-size — Every target's real hit area is at least 24×24px, at every density.
reflow — Content reflows into 320px and survives a doubled text size.

Not covered: screen-reader: not yet verified by a person. Everything above is a machine check; a person has not yet driven this component with a screen reader.

Motion & sound

Motion tokens: morphFeels.cell, morphFeels.mercury, morphFeels.cut
Reduced motion: The states swap in place and Stop doesn't swell; the bars still show the level.
Sound: Each cap's own press. The recording itself is the only other sound.

Props

VoiceNote props
Prop	Type	Default
`onRecorded`Called when a take is kept, with the recording (a Blob, or null if the browser gave none) and its length, ms.	`function`
`onDelete`Called when the note is deleted.	`function`
`maxDuration`Longest take, ms. Defaults to 60000.	`number`
`feel`How it moves: cell (the default) pinches evenly and each half swells round; mercury is short, quick and jiggles; cut is a clean cut, then the caps slide.	`"cell" \| "mercury" \| "cut"`
`size`Height of its caps on the control scale: sm 32px, md 44px, lg 60px, as a HardwareButton of that size. Defaults to the nearest SizeProvider's size.	`"sm" \| "md" \| "lg"`
`align`Which edge stays put while the buttons change: center (the default), start or end.	`"center" \| "start" \| "end"`

Anti-patterns

Never record without the user pressing record: the microphone is theirs.

Changelog

v0.3.0 · 2026-10-12 · ChangedEvery item needs echo-ui-core 0.3.0 (all components). The drawn device, readability past AA and the design tests live in core, and the components that use them are built against it, so each item now declares echo-ui-core >=0.3.0 <0.4.0. Update core with the items: npm install echo-ui-core@^0.3.0 (or your package manager's), then npx echo-ui-cli update. An item whose files didn't change is the same code under a new version; the 0.2.0 files stay published.
v0.2.0 · 2026-10-04 · AddedSix more that change shape as you use them, all on Morph. SaveButton narrows into its own progress while your save runs, widens into a lit "Saved" and flows back. Timer opens into durations; the others run into the one you pick, which drains as the time runs and rings. Stopwatch buds a Lap button from Start, and every lap is a drop that lands in the lap count. VoiceNote records from the microphone: your voice swells the Stop button, and the take becomes a note that fills as it plays. AddToBag sends a drop from the button into the count beside it. useBudOff is that drop on its own, from any element into any other. Morph now keeps a button's identity across states when it has the same data-morph name, and draws filled caps as levels.
v0.2.0 · 2026-10-04 · ChangedComments only, no behaviour change. Comments in the component source used to cite documents, milestones and ticket numbers from Echo's own planning, none of which exist in your project. The citations are gone and the sentences around them stay. Where a comment was only a citation, it now says what it meant. Three development warnings (HardwareButton's engraved/caption checks and StatusDot's missing-label check) also dropped the ticket code at the end of the message. echo-ui diff will show changes in most items; none of them are to code.
v0.2.0 · 2026-10-04 · ChangedAn item's version is now a function of declared data, not of how the changelog is formatted. The version an item ships under is published once and never rewritten, and it used to be inferred from prose: a regex for a bolded "Breaking" run across the whole unreleased section, and attribution by "does a bullet mention this name in backticks". One breaking entry therefore moved every item that changed that cycle, and an entry explaining that "Menu and Sheet are unchanged here" filed itself as a change to Menu and Sheet — which it really had.
v0.2.0 · 2026-10-04 · ChangedThe agent brief says Echo has not shipped. llms.txt and the MCP server's instructions led with npx echo-ui-cli init, and that name on npm is a reserved stub with no executable — so a model following the brief wrote an install step that fails with npx's own error. The brief now opens with the caveat, and the docs carry it on every surface that shows a command. One switch (CLI_RELEASED) silences all of them at launch, and a test refuses to let one move without the others. Affects all components only in what the brief says about installing them; no item's props, CSS or rendered semantics change.
v0.2.0 · 2026-10-04 · ChangedEcho's home is echo-ui.com. The registry, the docs and the packages all move to it from echo.nawwara.studio. Nothing was published under the old host, so no echo.json anywhere points at it and there is nothing to migrate — this is the last release where that is true.
v0.2.0 · 2026-10-04 · ChangedWeights, line heights, letter-spacing, z-index, border widths and icon sizes come from the theme scales in all components, with the old value as a fallback, so components keep working with echo-ui-core@0.0.1. Strays moved to the nearest step: most by under a pixel; HardwareButton icons are 14/16/20px (were 15/17/19).
v0.2.0 · 2026-10-04 · FixedVoiceNote never leaves the microphone open (BUG-69). Two presses on the microphone before the browser granted it opened two streams and closed only one, so the recording light stayed on; leaving the page while it was still asking did the same. The second press is now ignored, and a stream granted after the component let go is closed straight away.
v0.2.0 · 2026-10-04 · FixedContent now reflows into a 320px screen (400% zoom) and survives a doubled browser text size (WCAG 1.4.10, 1.4.4), across all components. Select's 180px floor, NumberField's readout, Segmented and Steps as flex items, EmptyState's grid columns, and Avatar's fixed-pixel disc all gave way; Panel counts its padding inside a width you set (box-sizing: border-box), so a <Panel style={{ width: 220 }}> is now 220px wide overall rather than 260px.

Preview