ember-safe-button

Provides a button for potentially dangerous actions that need confirmation without popping a modal. The first click unlocks the safety, the second confirms the action. If no confirmation is provided, the safety rolls back after a timeout so you never stay in a risky state.

This is ideal for destructive actions (delete, remove, revoke) where you want users to stay in context, keep focus, and still get a deliberate second click. It slows accidental taps just enough to prevent mistakes, but stays lighter weight than a full dialog.

• GitLab:
• Demo page: https://ember-safe-button.netlify.app

Compatibility

• Ember.js v5.8 or above
• Embroider or ember-auto-import v2
• Node.js v20.19+ for local development/builds

Installation

ember install ember-safe-button

Usage

Minimal example (GJS):

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { SafeButton } from 'ember-safe-button';

export default class DeleteButton extends Component {
  @action
  confirmDelete() {
    // delete the record
  }

  <template>
    <SafeButton @message="delete" @onConfirm={{this.confirmDelete}} />
  </template>
}

Minimal example (HBS):

<SafeButton @message="delete" @onConfirm={{this.safeButtonClicked}} />

Animations

@animation expects an animation object. Built-in animations are exported as animations:

import Component from '@glimmer/component';
import { action } from '@ember/object';
import { SafeButton, animations } from 'ember-safe-button';
// animations = { poing, slide, flip, zoom, roll, "lift-bars" }

export default class AnimatedDelete extends Component {
  @action
  confirmDelete() {
    // delete the record
  }

  <template>
    <SafeButton
      @animation={{animations.flip}}
      @message="delete"
      @onConfirm={{this.confirmDelete}}
    />
  </template>
}

Which will produce:

Documentation

Run the demo app locally:

pnpm start

Build the demo app for static hosting:

pnpm demo:build

Contributing

See the Contributing guide for details.

Contributors

• Michal Bryxí

License

This project is licensed under the MIT License.

Attribution

Icons made by DinosoftLabs and surang from Flaticon.