# Fuse Button

> Action button whose done state carries an undo on a burning fuse.

An action button with a built-in grace period. Click it and the face crossfades to **Undo** while a fuse burns around the pill (or along an edge). Click Undo, press Escape, or let the fuse run out. Hovering pauses the burn so you can read and decide.

<demo-fuse-button>



</demo-fuse-button>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/fuse-button.json"
```

## Usage

```vue
<script setup lang="ts">
  import FuseButton from '~/components/ui/fuse-button/FuseButton.vue';

  function archive() {
    console.log('archived');
  }

  function restore() {
    console.log('restored');
  }
</script>

<template>
  <FuseButton
    label="Archive"
    done-label="Archived"
    icon="lucide:archive"
    fuse-color="#f5a524"
    :undo-window="4000"
    @commit="archive"
    @undo="restore"
  />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Archive'
      </code>
    </td>
    
    <td>
      The idle action
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        undo-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Undo'
      </code>
    </td>
    
    <td>
      The armed face that cancels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        done-label
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Archived'
      </code>
    </td>
    
    <td>
      Announced on press; shown when <code>
        settle
      </code>
      
       is <code>
        'stay'
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'lucide:archive'
      </code>
    </td>
    
    <td>
      Iconify name of the idle icon (or use the <code>
        icon
      </code>
      
       slot)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f5f5f5'
      </code>
    </td>
    
    <td>
      Text and icon ink
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#27272a'
      </code>
    </td>
    
    <td>
      The pill surface
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fuse-color
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#f5a524'
      </code>
    </td>
    
    <td>
      The lit line or ring
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        size
      </code>
    </td>
    
    <td>
      <code>
        'sm' | 'md' | 'lg'
      </code>
    </td>
    
    <td>
      <code>
        'md'
      </code>
    </td>
    
    <td>
      Height, font and padding preset
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        22
      </code>
    </td>
    
    <td>
      Corner radius in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        undo-window
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        4000
      </code>
    </td>
    
    <td>
      How long the undo stays available, in ms
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fuse
      </code>
    </td>
    
    <td>
      <code>
        'outline' | 'bottom' | 'top'
      </code>
    </td>
    
    <td>
      <code>
        'outline'
      </code>
    </td>
    
    <td>
      A ring around the pill, or a line along one edge
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fuse-thickness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1.5
      </code>
    </td>
    
    <td>
      Line height or rim stroke in pixels
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        crossfade-ms
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        200
      </code>
    </td>
    
    <td>
      Crossfade between faces, in ms
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        commit-on
      </code>
    </td>
    
    <td>
      <code>
        'press' | 'fuseEnd'
      </code>
    </td>
    
    <td>
      <code>
        'press'
      </code>
    </td>
    
    <td>
      Fire <code>
        commit
      </code>
      
       on press, or only when the fuse ends
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        pause-on-hover
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Hovering the pill pauses the fuse (mouse only)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        settle
      </code>
    </td>
    
    <td>
      <code>
        'reset' | 'stay'
      </code>
    </td>
    
    <td>
      <code>
        'reset'
      </code>
    </td>
    
    <td>
      Return to idle, or stay done, after the fuse ends
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disabled
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Disables the idle face
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        type
      </code>
    </td>
    
    <td>
      <code>
        'button' | 'submit' | 'reset'
      </code>
    </td>
    
    <td>
      <code>
        'button'
      </code>
    </td>
    
    <td>
      Native type of the idle button
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the pill
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        commit
      </code>
    </td>
    
    <td>
      <code>
        reason: 'press' | 'fuseEnd'
      </code>
    </td>
    
    <td>
      The action
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        undo
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Undo was used
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        fuse-end
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      The fuse burned out
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        phase-change
      </code>
    </td>
    
    <td>
      <code>
        'idle' | 'armed' | 'settled'
      </code>
    </td>
    
    <td>
      Every phase change
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        icon
      </code>
    </td>
    
    <td>
      Replaces the idle icon
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- Idle and Undo are real buttons; only the active face is focusable (the others are `inert`), and focus moves to Undo when armed and back afterwards.
- Escape undoes while armed (`aria-keyshortcuts="Escape"`); a polite live region announces the done label.
- Keyboard activation swaps faces instantly; the fuse pauses while the tab is hidden.
- With `prefers-reduced-motion`, the press squash, blur and icon spin are removed.
- Ported from [React Bits](https://reactbits.dev/micro/fuse-button) by David Haz.