# 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.

Kit part · With the Kit · https://tactileui.dev/parts/commit

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The key is the kit key, unchanged, standing in its own cut. The matrix is sixteen dots behind a small dark window in the cap, each with a lit layer whose opacity alone animates, delayed by its diagonal, so the amber wave runs corner to corner; done and failed light fixed patterns in green and red. The four legends share one grid cell, so the widest sets the key and a swap only fades.

## Variants

- Contrast · the surface’s main action
- Plain
- Small · in a table row
- Guarded · a cover to lift
- Busy · latched, scanning
- Failed · says what, and why

## States

- Idle
- Hover
- Pressed
- Busy
- Done
- Failed
- Focus
- Cover lifted

## Props and options

| Name | Kind | Description |
| - | - | - |
| data-busy · data-done · data-failed | attribute | The legend for each state. All four share one cell, so the key never changes width. |
| data-state | attribute | Where it is. Written by the part; set it in markup only to show a state. |
| data-rest | attribute | How long done stays before the key goes idle; failed stays twice as long. |
| data-hold | attribute | Done and failed stay until the next press or reset(). |
| data-guard | attribute | A hinged cover over the cut: the first press lifts it, the second commits; it drops after this long unused. |
| data-why | attribute | The reason a run failed, printed under the key. Written from the rejection’s message. |
| data-cover | attribute | The guard’s cover. Written by the part. |
| commit | event | Fired on a press. Hand wait() the work’s promise and the key runs on it; hand it nothing and it was an ordinary press. |
| Enter · Space | keyboard | Native: press the key. While busy nothing happens and focus stays. |
| Escape | keyboard | Drops a lifted cover. |

## Usage notes

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.

## Accessibility

- 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 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.

## Related parts

- [Key](https://tactileui.dev/parts/key): Every button, and every link that acts like one: a cap on a skirt that drops below the plate when pressed.
- [Lamp](https://tactileui.dev/parts/lamp): The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
- [Progress](https://tactileui.dev/parts/progress): Progress through a task: ink filling a groove, never a coloured bar.