Confirm — ARC UI

Components

Confirm

feedback

interactive

<arc-confirm>

Overview

Guidelines

When to use

Use the danger 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

Use confirm for informational messages that don't require a decision — use alert or dialog
Chain multiple confirmations — if the action needs more context, use a full dialog or form
Use vague labels like "OK" and "Cancel" — be specific about what each button does
Fire a confirmation for every action — reserve it for destructive or irreversible operations
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 danger (error-coloured 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="danger"
  onclick="Object.assign(document.getElementById('confirm'), {
    heading: 'Delete this item?',
    message: 'This action cannot be undone.',
    variant: 'danger',
    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="danger"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="danger" 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="danger"
    confirm-label="Delete" cancel-label="Keep"
    @arc-confirm="handleConfirm" @arc-cancel="open = false" />
  <Button variant="danger" @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="danger"
  confirmLabel="Delete" cancelLabel="Keep"
  on:arc-confirm={handleConfirm}
  on:arc-cancel={() => open = false} />
<Button variant="danger" 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: `
    <Confirm [open]="open" heading="Delete this item?"
      message="This action cannot be undone." variant="danger"
      confirmLabel="Delete" cancelLabel="Keep"
      (arc-confirm)="onConfirm()" (arc-cancel)="open = false"></Confirm>
    <Button variant="danger" (click)="open = true">Delete Item</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="danger"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="danger" 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="danger"
        confirmLabel="Delete"
        cancelLabel="Keep"
        onArcConfirm={() => { setOpen(false); /* perform delete */ }}
        onArcCancel={() => setOpen(false)}
      />
      <Button variant="danger" onClick={() => setOpen(true)}>Delete Item</Button>
    </>
  );
}

API

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls whether the confirmation dialog is visible. For declarative usage; the imperative API manages this automatically.
`heading`	`string`	—	The heading text displayed at the top of the confirmation dialog.
`message`	`string`	—	The body message explaining what the user is confirming.
`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' \| 'danger'`	`'default'`	Controls the confirm button style. Use "danger" for destructive actions — the confirm button renders in the error colour.

Events

Event	Description
`arc-confirm`	Fired when the user clicks the confirm button
`arc-cancel`	Fired when the user clicks cancel, presses Escape, or clicks the backdrop