Skip to the page
Tactile UI Kit

Commit key

A key for work that takes time and must not run twice. It latches below the plate while the work runs, an LED matrix in its face scanning amber, and says how it ended.

Press a key: it latches while the work runs, and a second press does nothing. Pay fails the first time (card declined). Delete is guarded: lift the cover, then press.

  • It stays a native <button>. While busy it takes aria-busy="true" and aria-disabled="true" — not disabled — so focus stays on it and a screen reader hears that it is working.
  • A polite live region says each state in words: “Deploying…”, “Deployed”, “Payment failed — card declined”. The button’s own name is always the legend showing.
  • The matrix is decoration (aria-hidden); the words carry the state, and each state has its own lamp colour as well as its own pattern — scan, tick, cross.
  • The guard is two ordinary presses, so it works with a keyboard, a switch and a screen reader; the key describes the cover, the live region says when it has lifted, Escape drops it.
  • Reduced motion stops the scan, the spring and the cover’s swing: the matrix lights steady amber while busy, and every state still shows.
Tactile UI Kit
Get the Founder Pass