Confirmation

Preview

In action

When to use

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { Confirmation } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/confirmation.

Copy the source

npx @noorddev/vlak-cli add confirmation

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/confirmation.json

Installs the same source through the shadcn CLI.

React

import { Confirmation } from "@noorddev/vlak-react";

export function AppendixApproval({ recordApproval }: {
  recordApproval: (approved: boolean) => void | Promise<void>;
}) {
  return <Confirmation title="Include the appendix?" onConfirm={() => recordApproval(true)} onReject={() => recordApproval(false)}>
    Adds the supplied appendix to the proposed draft. Review it before continuing.
  </Confirmation>;
}

See the integration example to compose these components with your application's model and data.

Props

Confirmation

Records a decision about an application-owned action without executing a tool.

Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.

The ref reaches HTMLElement.

Keyboard

Accessibility

• A native section is named by the visible title. Children supply context for the proposed action.
• Pending recording exposes aria-busy, disables both actions, and prevents duplicate callback submissions.
• Only a successful callback records accepted or rejected status. A failed callback leaves the proposal pending, reports an alert, and offers Try again for that decision.
• status and onStatusChange support application-controlled decisions; defaultStatus sets the uncontrolled initial decision. A changed controlled status invalidates an older pending callback result.
• A successfully recorded controlled decision stays locked until status changes. Use a new React key for a new proposal; a pending prop alone cannot resubmit an acknowledged decision.
• The status announces Approval recorded or Rejected. This component records a decision; application code owns tool execution. The ref reaches the section, and native attributes pass through.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<section class="rs-confirmation" aria-labelledby="approval-title"><p id="approval-title" class="rs-confirmation-title">Include the appendix?</p><div class="rs-confirmation-context">Adds the supplied appendix to the proposed draft.</div><div class="rs-confirmation-actions"><button class="rs-btn-primary rs-confirmation-action" type="button">Confirm</button><button class="rs-btn-ghost rs-confirmation-action" type="button">Reject</button></div><p class="rs-confirmation-status" role="status">Awaiting your decision</p></section>

Classes

Depends on

Use elsewhere

More in AI