Fuse undo
An action button whose done state carries an Undo on a burning fuse; the action commits only when the fuse runs out.
- enhancer
- button
- undo
- timer
- archive
- action
- since 0.2
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Fuse undo example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<button type="button" data-motion="fuse-undo">Archive</button>import { FuseUndo } from "./motion/react/FuseUndo";
<FuseUndo>Your content</FuseUndo><script setup lang="ts">
import FuseUndo from "./motion/vue/FuseUndo.vue";
</script>
<template>
<FuseUndo>Your content</FuseUndo>
</template>const el = document.querySelector("#title");
el.dataset.motion = "fuse-undo";The wrappers: FuseUndo.tsx (React, TypeScript) and FuseUndo.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-done | Archived | the label after the press |
data-motion-window | 5000 | how long Undo stays |
Accessibility
- After the press the button reads as disabled with its done label, an Undo button appears right after it and takes focus, and a polite announcement says how long Undo stays open. - The time stops while the pointer rests on it, while Undo has focus and while the tab is hidden; Undo puts everything back and focus returns to the button. - The page listens for act, undo and commit events on the button: do the real work on commit. - Reduced motion hides the fuse; the time still runs. Reduced motion shows every state at once, with no movement, and stops anything that would move on its own. Frame loops and CSS animations pause off screen and in hidden tabs. Only transform, opacity and paint animate, so nothing around it moves.
Size
fuse-undo.js is 1.5 KB gzip, with components-kit.js 3.9 KB it needs. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.