Confirm

kai-confirm

A structured approval card that pairs a body message with labelled action buttons — use it when the model needs an explicit go-ahead before a consequential operation runs.

• Shadow DOM
• Single kai-card event
• Resolves on action (no double-fire)
• 3 action styles
• Optional dismiss affordance

Preview

When to use

Use <kai-confirm> when the model proposes an action the user must explicitly approve — deploying, deleting, sending. tone: 'warning' signals caution; tone: 'danger' signals destructive intent via colour and icon. For equally-weighted choices that aren’t approval-gated, use <kai-choice> instead.

Usage

Set data in JavaScript (it’s an object) and listen for the kai-card CustomEvent:

<kai-confirm heading="Run database migration?"></kai-confirm>

<script type="module">
  import '@kitn.ai/ui/elements';
  const el = document.querySelector('kai-confirm');

  el.data = {
    body: 'This will apply 3 pending migrations to production. This cannot be undone.',
    tone: 'warning',
    actions: [
      { id: 'approve', label: 'Run migration', style: 'primary', default: true },
      { id: 'reject',  label: 'Cancel' },
    ],
  };

  el.addEventListener('kai-card', (e) => {
    const ev = e.detail; // { kind: 'action', cardId, action, payload? }
    if (ev.kind === 'action') console.log('chose', ev.action);
  });
</script>

• data — shape: ConfirmCardData from @kitn.ai/ui. Malformed payloads render an inline error.
• Action styles — 'primary' | 'default' | 'destructive'. Mark one default: true to make it the keyboard default; combine with autofocus to focus it on mount.
• Restore resolved state via el.resolution = { kind: 'action', action: 'approve' } — useful when replaying past conversations.

Examples

Approve or Reject

The canonical two-action pattern: warning tone, primary confirm, plain cancel.

Code

Destructive Action

tone: 'danger' with style: 'destructive' — colour and icon both signal severity.

Code

Choice Set

More than two actions work naturally — each becomes a button.

Code

Dismissible

dismissible: true adds a close (×) affordance that fires { kind: 'dismiss', cardId } — the card stays in the DOM.

Code

Resolved (Read-only)

Set the resolution property to render the chromed read-only view for a replayed conversation.

Code

Error State

An empty actions array renders the inline error view and fires { kind: 'error', cardId, message }.

Code

Props

Property	Type	Default	Notes
data	Record<string, unknown>	—	The confirm definition (the CardEnvelope.data). Set as a JS PROPERTY: `el.data = { body, tone, actions:[…] }`. Import `ConfirmCardData` from `@kitn.ai/ui` for the full shape.
cardId	string	—	Stable card id correlating every emitted CardEvent. Attribute: `card-id`.
heading	string	—	Heading rendered in the card chrome (= CardEnvelope.title). Attribute: `heading`.
autofocus	boolean	false	Focus the default action on mount (off by default — no focus-stealing). Attribute: `autofocus`.
resolution	Record<string, unknown>	—	Set when the user resolved this card; renders the read-only view. Property: `el.resolution = { kind:'action', action:'…' }`.

Composed from

This element wraps these SolidJS components — reach for them directly when you need finer control than the props expose.

ConfirmCard

---

Need a hand? Report a bug Ask for help