Confirm

Programmatic confirmation API that wraps dialog. Call ArcConfirm.open() and await the returned promise. Same visual treatment as dialog.

Components

Confirm

feedback

interactive

<arc-confirm>

Overview

Confirm provides a promise-based programmatic API for confirmation dialogs. Instead of managing dialog open/close state and listening for button clicks, you call `ArcConfirm.open()` with a heading and message, and `await` the returned promise. The promise resolves to `true` if the user confirms and `false` if they cancel — making it trivial to gate destructive actions behind user consent. Under the hood, Confirm renders a dialog with the same visual treatment — backdrop blur, surface-raised panel, and focus trap — but with a fixed two-button layout: a cancel button (ghost variant) and a confirm button styled by the `variant` prop. The `error` variant recolors the confirm button with the error color, making it visually clear that the action is destructive. The component can also be used declaratively as `<arc-confirm>` with props and events, but the imperative `ArcConfirm.open()` API is the recommended pattern for most use cases. A single `<arc-confirm>` element in the layout can be reused for all confirmation prompts in the application.

Guidelines

When to use

Use the error variant for destructive actions like delete, remove, or revoke
Write a clear heading that states the action: "Delete project?" not "Are you sure?"
Provide specific confirm/cancel labels: "Delete" and "Keep" instead of "OK" and "Cancel"
Use the imperative API for cleaner async flows: const ok = await ArcConfirm.open(...)
Place a single <arc-confirm> at the root of your layout for reuse across the application

When not to use

Do not use confirm for informational messages that don't require a decision — use alert or dialog
Do not chain multiple confirmations — if the action needs more context, use a full dialog or form
Do not use vague labels like "OK" and "Cancel" — be specific about what each button does
Do not fire a confirmation for every action — reserve it for destructive or irreversible operations
Do not rely on the default browser confirm() — it blocks the thread and cannot be styled

Features

Promise-based ArcConfirm.open() API — await user confirmation in one line
Resolves true on confirm, false on cancel — no event listeners needed
Two variants: default (primary confirm button) and error (error-colored confirm button)
Customizable heading, message, confirm label, and cancel label
Same visual treatment as dialog — backdrop blur, surface-raised panel, focus trap
Focus trap keeps keyboard navigation within the dialog while open
Escape key and backdrop click trigger cancel
`arc-confirm` and `arc-cancel` events for declarative usage
Accessible — `role="alertdialog"`, `aria-modal`, auto-focus on confirm button

Preview

Delete Item

Confirm Action

Usage

This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.

<script type="module" src="@arclux/arc-ui"></script>

<arc-confirm id="confirm"></arc-confirm>

<arc-button variant="primary"
  onclick="Object.assign(document.getElementById('confirm'), {
    heading: 'Delete this item?',
    message: 'This action cannot be undone.',
    variant: 'error',
    confirmLabel: 'Delete',
    cancelLabel: 'Keep',
    open: true
  })">
  Delete Item
</arc-button>

import { Confirm, Button } from '@arclux/arc-ui-react';
import { useState } from 'react';

export function ConfirmDemo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Confirm
        open={open}
        heading="Delete this item?"
        message="This action cannot be undone."
        variant="error"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="primary" onClick={() => setOpen(true)}>Delete Item</Button>
    </>
  );
}

<script setup>
import { ref } from 'vue';
import { Button, Confirm } from '@arclux/arc-ui-vue';

const open = ref(false);
const handleConfirm = () => { open.value = false; /* perform delete */ };
</script>

<template>
  <Confirm :open="open" heading="Delete this item?"
    message="This action cannot be undone." variant="error"
    confirm-label="Delete" cancel-label="Keep"
    @arc-confirm="handleConfirm" @arc-cancel="open = false" />
  <Button variant="primary" @click="open = true">Delete Item</Button>
</template>

<script>
  import { Button, Confirm } from '@arclux/arc-ui-svelte';

  let open = false;
  const handleConfirm = () => { open = false; /* perform delete */ };
</script>

<Confirm {open} heading="Delete this item?"
  message="This action cannot be undone." variant="error"
  confirmLabel="Delete" cancelLabel="Keep"
  on:arc-confirm={handleConfirm}
  on:arc-cancel={() => open = false} />
<Button variant="primary" on:click={() => open = true}>Delete Item</Button>

import { Component } from '@angular/core';
import { Button, Confirm } from '@arclux/arc-ui-angular';

@Component({
  imports: [Button, Confirm],
  template: `
    <arc-confirm [open]="open" heading="Delete this item?"
      message="This action cannot be undone." variant="error"
      confirmLabel="Delete" cancelLabel="Keep"
      (arc-confirm)="onConfirm()" (arc-cancel)="open = false"></arc-confirm>
    <arc-button variant="primary" (click)="open = true">Delete Item</arc-button>
  `,
})
export class ConfirmDemoComponent {
  open = false;
  onConfirm() {
    this.open = false;
    // perform delete
  }
}

import { Button, Confirm } from '@arclux/arc-ui-solid';
import { createSignal } from 'solid-js';

export function ConfirmDemo() {
  const [open, setOpen] = createSignal(false);

  return (
    <>
      <Confirm
        open={open()}
        heading="Delete this item?"
        message="This action cannot be undone."
        variant="error"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="primary" onClick={() => setOpen(true)}>Delete Item</Button>
    </>
  );
}

import { Button, Confirm } from '@arclux/arc-ui-preact';
import { useState } from 'preact/hooks';

export function ConfirmDemo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Confirm
        open={open}
        heading="Delete this item?"
        message="This action cannot be undone."
        variant="error"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="primary" onClick={() => setOpen(true)}>Delete Item</Button>
    </>
  );
}

API

open boolean =false: Controls whether the confirmation dialog is visible. For declarative usage; the imperative API manages this automatically.
open boolean =false
heading string ='': The heading text displayed at the top of the confirmation dialog.
message string ='': The body message explaining what the user is confirming. Used as the fallback for the default slot, so it is the simplest way to set the body and the only one available to the imperative `ArcConfirm.open()` API.
confirm-label string ='Confirm': Label for the confirm button. Use a specific verb like "Delete" or "Publish" instead of generic "OK".
cancel-label string ='Cancel': Label for the cancel button. Use a specific alternative like "Keep" or "Go back" when possible.
variant 'default' | 'error' ='default': Controls the confirm button style. Use "error" for destructive actions — the confirm button renders in the error color.

Events

arc-confirm: Fired when the user clicks the confirm button
arc-cancel: Fired when the user clicks cancel, presses Escape, or clicks the backdrop

Confirm

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight