Toggle Sidebar B
AppearanceLight & dark mode D
Fuse Button
Action button that commits on press and turns into an Undo button while a fuse burns down its rim, then settles back or stays done.
Default
Press the button, then undo it before the fuse burns out. Hover the pill with a mouse to freeze the fuse.
API Reference
FuseButton
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | 'Archive' | The idle action. |
undoLabel | string | 'Undo' | The label while the fuse burns. The whole pill is the Undo button. |
doneLabel | string | 'Archived' | Shown with a check once the fuse burns out and settle is stay. Announced to screen readers on arm. |
color | string | '#f5f5f5' | Ink for labels and icons. The seam and tints derive from it. |
background | string | '#27272a' | The pill surface. |
fuseColor | string | '#f5a524' | The lit line or ring. |
size | 'sm' | 'md' | 'lg' | 'md' | Height 36, 44 or 52 pixels with matching type and icons. |
radius | number | 22 | Corner radius in pixels. 22 is a full pill at the medium size. |
undoWindow | number | 4000 | How long the fuse burns and Undo stays on offer, in milliseconds. |
fuse | 'outline' | 'bottom' | 'top' | 'outline' | The pill rim burning down clockwise, or a line along the bottom or top edge. |
fuseThickness | number | 1.5 | Line height or rim stroke in pixels. |
crossfadeMs | number | 200 | Blur crossfade between faces after a pointer press. Keyboard commits swap instantly. |
commitOn | 'press' | 'fuseEnd' | 'press' | When commit fires: at the press, with Undo as the revert, or only once the fuse burns out. |
pauseOnHover | boolean | true | Leaving and coming back with a mouse freezes the fuse until the pointer leaves again. |
settle | 'reset' | 'stay' | 'reset' | After the fuse ends: return to the idle face, or stay on a terminal done face until remounted. |
disabled | boolean | false | Dims the idle face and ignores presses. Undo stays available while armed. |
type | 'button' | 'submit' | 'reset' | 'button' | Type of the idle button. |
| Event | Description |
|---|---|
commit | The action. Emitted with the reason, 'press' or 'fuseEnd'. |
undo | Emitted when Undo or Escape runs the action back. |
fuse-end | Emitted when the window closes without an undo. |
phase-change | Emitted on every phase change with 'idle', 'armed' or 'settled'. |
| Slot | Description |
|---|---|
icon | The idle glyph. An archive icon when omitted. |
Accessibility
Keyboard shortcuts and ARIA behavior.
| Shortcut | Description |
|---|---|
| Space + Enter | Presses the idle button, or Undo while armed. |
| Escape | Undoes the action while the fuse burns. |
- Focus moves to Undo when the button arms and returns to the action when it resets. The faces that are not showing are inert.
- A status region announces the done label when the button arms. The fuse pauses while the tab is hidden.
- With prefers-reduced-motion the faces fade without blur or rotation.