HoldButton

Confirm by holding: the primary plastic fills the cap while you press, drains if you let go early, and the action happens when it's full. For the moments a second tap would be too easy. Space and Enter hold it too; a single press that can't hold (assistive tech) arms it instead, and a second press confirms. ConfirmButton is the two-press alternative.

Feel You lean on it and it fills under your finger; let go and it drains away, as if nothing happened.

Hold until the cap is full

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

Installation

npx echo-ui-cli add hold-button

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: 1.7 KB · 31.1 KB with what it imports · 2.3 KB of CSS (minified and gzipped; React not counted)
Needs: hardware-button (Echo, brought with it), size (Echo, brought with it)
Keyboard: A real button. Space and Enter hold it like a pointer; a held key is one hold.
Reduced motion: The fill still shows the hold: it's the progress, not decoration.
Sound: The cap's own press, and a rising note when it's done, inside a SoundProvider.

Usage

tsx

import { HoldButton } from "@/echo/hold-button";

<HoldButton onConfirm={remove}>Delete project</HoldButton>

Composition

HoldButton → a HardwareButton whose fill is the hold

Examples

End for everyone

Hold until the cap is full.

tsx

<HoldButton variant="primary" onConfirm={endCall}>End for everyone</HoldButton>

Accessibility

A real button. Space and Enter hold it like a pointer; a held key is one hold.
Assistive tech that can only click arms it: it says "Press again to confirm" (announced), and the next press within five seconds confirms.
The label says what happens, and the result ("Done") is announced.
Nothing is ever confirmed by a single tap.

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

Reduced motion: The fill still shows the hold: it's the progress, not decoration.
Sound: The cap's own press, and a rising note when it's done, inside a SoundProvider.

Props

HoldButton props
Prop	Type	Default
`children` requiredWhat it does: "Delete project".	`unknown`
`onConfirm` requiredCalled once, when the hold completes (or the armed second press lands).	`function`
`duration`How long to hold, ms.	`number`	`1200`
`doneLabel`What it says once done, for a moment.	`string`	`"Done"`
`armedLabel`What it says when a single press (from assistive tech) arms it.	`string`	`"Press again to confirm"`
`variant`primary for the one main action, neutral (the default) for the rest, as on HardwareButton.	`"primary" \| "neutral"`	`"neutral"`
`size`Height of its cap 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"`
`icon`A leading icon (a ReactNode).	`unknown`
`disabled`	`boolean`	`false`

Anti-patterns

Never use a HoldButton for a routine action: holding is a cost, keep it for what's hard to undo.
Never mix HoldButton and ConfirmButton in one product: pick one way to confirm.

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 · AddedChoosing: Combobox, TagsInput, ChoiceCards, CheckboxGroup, Fieldset, Form and HoldButton. - Combobox: a Select you can type into. multiple keeps choices as tags that bud out of the text line; creatable offers to add what you typed. Built on Base UI Combobox. - TagsInput: free-form tags in Field's well (Enter or a comma adds, Backspace takes the last back, a paste becomes several), with normalize to clean or refuse each one. - ChoiceCards: options that need more than a word, as cards; the chosen one lights a rail and drops its pip. One choice is a radio group, multiple a group of checkboxes. - CheckboxGroup: a named set of checkboxes with an optional parent that shows a dash when only some are on. - Fieldset: a named group of fields with a legend. - Form: fails well. Pass errors to it and to each field; after a failed submit a summary at the top takes focus, counts the problems and links each to its field. - HoldButton: confirm by holding; the cap fills while pressed and drains if let go. A press that can't hold (assistive tech) arms it and a second press confirms.
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 · 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