# Armed Buttons > Production-style armed archive and delete wait button microinteractions built with Svelte Motion, AnimatePresence, and spring transitions. **Source:** [https://motion.svelte.page/examples/armed-buttons](https://motion.svelte.page/examples/armed-buttons) **Markdown mirror:** [https://motion.svelte.page/examples/armed-buttons.md](https://motion.svelte.page/examples/armed-buttons.md) --- This mirror preserves the prose, implementation notes, and runnable Svelte source behind the live example page. ## FIG-001: archive armed button. A quiet row action that becomes intentional on demand: hover exposes the archive icon, first click arms it, and `AnimatePresence` springs a compact confirm button into place. Arm another row to watch the previous one eject. **Metadata:** tag: `ARMED` | wow: `icon blooms into confirm` ### Notes - The WOW behavior is the small archive icon blooming into a labeled confirm button, keeping the row calm until the user shows intent. Archived rows flip the same slot into an armed unarchive action. - `AnimatePresence` owns the confirm button mount and exit, while the row uses `whileHover` and spring transitions for tactile feedback. - The armed state auto-disarms after a short timeout, so an abandoned destructive action never stays primed. ### Source #### Archive.svelte Source file: [src/lib/examples/armed-buttons/demos/Archive.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/demos/Archive.svelte) ```svelte
// archive queue {status}
{#each rows as row (row.id)} (armedId = row.id)} onDisarm={() => { if (armedId === row.id) armedId = null }} onArchive={() => toggleArchiveRow(row.id)} /> {/each}
disarm: 4s / spring 520·32 archived: {String(archivedCount).padStart(2, '0')} / 03
``` #### ArchiveArmedButton.svelte Source file: [src/lib/examples/armed-buttons/ArchiveArmedButton.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/ArchiveArmedButton.svelte) ```svelte ({ position: 'relative', display: 'flex', width: '100%', maxWidth: '26rem', alignItems: 'center', gap: '0.75rem', border: '1px solid var(--brut-rule-2, #bbc4c0)', background: 'var(--brut-bg-2, #eef4f1)', padding: '0.75rem', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }))} data-testid="archive-row" data-armed={isArmed} data-archived={isArchived} >

{isArchived ? 'Archived' : eyebrow}

{title}

{#if coverArchiveSlot} {/if} ({ display: 'inline-flex', width: '2rem', height: '2rem', flex: 'none', alignItems: 'center', justifyContent: 'center', border: '1px solid transparent', background: 'transparent', color: 'var(--brut-ink-3, #9a9a9a)', cursor: 'pointer', opacity: coverArchiveSlot ? 0 : 1, pointerEvents: coverArchiveSlot ? 'none' : 'auto' }))} > {#if isArchived} {:else} {/if} {#if isArmed} ({ position: 'absolute', top: 0, bottom: 0, right: 0, zIndex: 20, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }))} > ({ position: 'relative', display: 'inline-flex', height: '2rem', overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: '0.375rem', border: '1px solid var(--brut-accent, #247768)', background: 'var(--brut-accent, #247768)', padding: '0 0.75rem', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap', color: 'var(--brut-accent-ink, #f8fcfb)', cursor: 'pointer' }))} > {/if}
``` ## FIG-002: delete armed + wait. Each delete row arms on first click, locks itself behind a visible countdown, then swaps into the final destructive confirm state without resizing the control. Arming a different row cancels the first countdown. **Metadata:** tag: `WAIT` | wow: `safety timer without layout shift` ### Notes - The WOW behavior is the row becoming its own safety mechanism: click once to arm, wait for the timer, then click again to confirm. Arming a second row cancels the first row's countdown. - A keyed motion span swaps trash, spinner, and success states so each icon gets a crisp entrance instead of popping in place. - Fixed height and reserved trailing space keep the button steady while countdown text changes. ### Source #### DeleteWait.svelte Source file: [src/lib/examples/armed-buttons/demos/DeleteWait.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/demos/DeleteWait.svelte) ```svelte
// delete queue {status}
{#each visibleRows as row (row.id)} (armedId = row.id)} onDisarm={() => { if (armedId === row.id) armedId = null }} onDelete={() => removeAfterDeletedBeat(row.id)} /> {/each}
countdown: 3s / disarm 10s rows: {String(visibleRows.length).padStart(2, '0')} / 03
``` #### DeleteArmedWaitButton.svelte Source file: [src/lib/examples/armed-buttons/DeleteArmedWaitButton.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/DeleteArmedWaitButton.svelte) ```svelte ({ width: '100%', maxWidth: '26rem' }))} > ({ position: 'relative', display: 'flex', height: '3rem', width: '100%', overflow: 'hidden', alignItems: 'center', gap: '0.75rem', borderWidth: '1px', borderStyle: 'solid', padding: '0 1rem', fontSize: '0.8125rem', lineHeight: 1, fontWeight: 600, boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: locked || deleted ? 'not-allowed' : 'pointer' }))} > {#if armed && !deleted && !deleting} 0 ? 'delete-disarm-meter-wait' : 'delete-disarm-meter-ready'} initial={{ scaleX: 1 }} animate={{ scaleX: secondsLeft > 0 ? 1 : 0 }} transition={{ duration: secondsLeft > 0 ? 0 : disarmMeterSeconds, ease: 'linear' }} aria-hidden="true" data-testid="delete-disarm-meter" style={styleString(() => ({ position: 'absolute', left: 0, right: 0, bottom: 0, height: '2px', transformOrigin: 'left', background: 'currentColor', opacity: 0.45, pointerEvents: 'none' }))} /> {/if} {#key deleted ? 'done' : locked ? 'locked' : armed ? 'ready' : 'idle'} {#if deleted} {:else if locked} {:else} {/if} {/key} {#if deleted} Deleted {:else} {eyebrow} {title} {/if} {#if armed && secondsLeft > 0} {#key secondsLeft} ({ display: 'inline-flex', alignItems: 'center', lineHeight: 1, fontVariantNumeric: 'tabular-nums' }))} > {secondsLeft} {/key} {:else if armed && !deleted} Ready {/if} ``` ## FIG-003: recording stage. A merged shared-insight list for demos, posts, and short design videos: archive and delete live beside each other, with delete hiding archive while it is armed. **Metadata:** tag: `VIDEO` | format: `video-ready` ### Notes - The stage keeps the shared-insight row format while combining archive and delete into one stable action cluster. - Archive arms in its own slot and leaves delete visible, so the safer secondary action never disappears during archive confirmation. - Delete clears any armed archive state, hides the archive control, counts down, and then unlocks the final destructive click. ### Source #### Default.svelte Source file: [src/lib/examples/armed-buttons/demos/Default.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/demos/Default.svelte) ```svelte
// recording stage {status}
{#each visibleRows as row (row.id)} {@const archiveArmed = archiveArmedId === row.id} {@const deleteArmed = deleteArmedId === row.id} {@const deleting = deletingId === row.id} {@const deleted = deletedIds.has(row.id)} {@const archived = archiveArchivedIds.has(row.id)} {@const locked = deleteArmed && deleteSecondsLeft > 0} {/each}
mode: popLayout / spring 520·34 rows: {String(visibleRows.length).padStart(2, '0')} / 03
``` #### RecordingInsightRow.svelte Source file: [src/lib/examples/armed-buttons/RecordingInsightRow.svelte](https://github.com/humanspeak/svelte-motion/blob/main/docs/src/lib/examples/armed-buttons/RecordingInsightRow.svelte) ```svelte {#if deleteActive} onArmDelete(row.id)} data-testid="recording-armed-row" data-archive-armed={archiveArmed} data-delete-armed={deleteArmed} data-delete-row-active={deleteActive} style={styleString(() => ({ position: 'relative', display: 'flex', height: '4rem', width: '100%', overflow: 'hidden', alignItems: 'center', gap: '0.75rem', borderWidth: '1px', borderStyle: 'solid', padding: '0 0.75rem', fontSize: '0.8125rem', lineHeight: 1, fontWeight: 600, boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)', cursor: locked || deleting || deleted ? 'not-allowed' : 'pointer' }))} > {#if deleteArmed && !deleted && !deleting} {:else} ({ position: 'relative', display: 'flex', height: '4rem', width: '100%', alignItems: 'center', gap: '0.75rem', border: '1px solid var(--brut-rule-2, #bbc4c0)', background: 'var(--brut-bg-2, #eef4f1)', padding: '0.75rem', boxShadow: '6px 6px 0 var(--brut-rule, #d6dedb)' }))} >

{archived ? 'Archived' : row.eyebrow}

{row.title}

{#if coverArchiveSlot} {/if} onArmArchive(row.id)} style={styleString(() => ({ display: 'inline-flex', width: '2rem', height: '2rem', flex: 'none', alignItems: 'center', justifyContent: 'center', border: '1px solid transparent', background: 'transparent', color: 'var(--brut-ink-3, #9a9a9a)', cursor: 'pointer', opacity: coverArchiveSlot ? 0 : 1, pointerEvents: coverArchiveSlot ? 'none' : 'auto' }))} > {#if archived} {:else} {/if} {#if archiveArmed} ({ position: 'absolute', top: 0, bottom: 0, right: 0, zIndex: 20, display: 'flex', alignItems: 'center', justifyContent: 'flex-end' }))} > onConfirmArchive(row.id)} whileHover={{ opacity: 0.9 }} whileTap={{ scale: 0.96 }} transition={{ type: 'spring', stiffness: 520, damping: 28 }} style={styleString(() => ({ position: 'relative', display: 'inline-flex', height: '2rem', overflow: 'hidden', alignItems: 'center', justifyContent: 'center', gap: '0.375rem', border: '1px solid var(--brut-accent, #247768)', background: 'var(--brut-accent, #247768)', padding: '0 0.75rem', fontFamily: 'var(--brut-mono, monospace)', fontSize: '0.6875rem', fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap', color: 'var(--brut-accent-ink, #f8fcfb)', cursor: 'pointer' }))} > {/if}
{#if !archived} onArmDelete(row.id)} style={styleString(() => ({ display: 'inline-flex', width: '2rem', height: '2rem', flex: 'none', alignItems: 'center', justifyContent: 'center', border: '1px solid transparent', background: 'transparent', color: 'var(--armed-danger, #b91c1c)', cursor: 'pointer' }))} > {/if}
{/if} ```