Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Tone

Confirm Text

Cancel Off makes it an alert with one button.

Dismissible Whether clicking the backdrop closes it.

Default Action Which button has focus when it opens.

Require Text Type-to-confirm: the visitor must type this exactly.

import { dialog } from '@devix-labs/confirm-dialog';
import '@devix-labs/confirm-dialog/styles.css';

const answer = await dialog({
  title: 'Delete invoice INV-2043?',
  description: 'It has already been sent to the client. This cannot be undone.',
  tone: 'danger',
  confirmText: 'Delete it',
  cancel: true,
  dismissible: false,
  defaultAction: 'cancel',
  requireText: ''
});
if (answer?.confirmed) remove();

import { useDialogs } from '@devix-labs/confirm-dialog/react';
import '@devix-labs/confirm-dialog/styles.css';

const { dialog } = useDialogs();

const remove = async () => {
  const answer = await dialog({
  title: 'Delete invoice INV-2043?',
  description: 'It has already been sent to the client. This cannot be undone.',
  tone: 'danger',
  confirmText: 'Delete it',
  cancel: true,
  dismissible: false,
  defaultAction: 'cancel',
  requireText: ''
});
  if (answer?.confirmed) destroy();
};

<script setup>
import { useDialogs } from '@devix-labs/confirm-dialog/vue';
import '@devix-labs/confirm-dialog/styles.css';

const { dialog } = useDialogs();
const remove = () => dialog({
  title: 'Delete invoice INV-2043?',
  description: 'It has already been sent to the client. This cannot be undone.',
  tone: 'danger',
  confirmText: 'Delete it',
  cancel: true,
  dismissible: false,
  defaultAction: 'cancel',
  requireText: ''
});
</script>

<template>
  <button @click="remove">Delete invoice</button>
</template>

<script>
  import { dialog } from '@devix-labs/confirm-dialog/svelte';
  import '@devix-labs/confirm-dialog/styles.css';

  const remove = () => dialog({
  title: 'Delete invoice INV-2043?',
  description: 'It has already been sent to the client. This cannot be undone.',
  tone: 'danger',
  confirmText: 'Delete it',
  cancel: true,
  dismissible: false,
  defaultAction: 'cancel',
  requireText: ''
});
</script>

<button on:click={remove}>Delete invoice</button>

Every option here is in the documentation, along with the ones that are not worth a control.