Approval
ngx-prompt-kit original — not part of ibelick/prompt-kit
A confirmation card for tool execution. Three severity tiers (info / warning / destructive) drive the action badge color and the Approve button variant.
Examples
Minimal — yes / no question
Just a title and the two buttons. Use when there's nothing to disclose beyond the question itself — tool name, parameters, and severity all elided.
Allow the assistant to access your clipboard?
<pk-approval
title="Allow the assistant to access your clipboard?"
(approved)="allow()"
(rejected)="cancel()"
/>Info — read-only tool call
Default severity. Use for low-risk actions: querying data, reading a file, listing resources. Approve gets the default button styling.
Run database query
The assistant wants to read from the analytics warehouse. No mutation will occur.
events_2026_0510000<pk-approval
title="Run database query"
description="The assistant wants to read from the analytics warehouse."
action="execute"
severity="info"
[parameters]="[
{ label: 'table', value: 'events_2026_05' },
{ label: 'limit', value: '10000' },
]"
(approved)="run()"
(rejected)="cancel()"
/>Warning — side effects
Use for actions with reversible-but-noisy side effects: sending notifications, creating records, calling rate-limited APIs.
Send email to 247 recipients
The assistant prepared a marketing campaign. Recipients are filtered to verified addresses only.
q2-newsletter247 (verified only)Your Q2 update is here — three new releases inside<pk-approval
title="Send email to 247 recipients"
action="send"
severity="warning"
[parameters]="campaignParams"
(approved)="send()"
(rejected)="cancel()"
/>Destructive — irreversible
Use for hard-to-reverse actions. The Approve button switches to destructive variant. Pending state shows a spinner and disables both buttons.
Delete repository
Removes the repository, all branches, and all associated CI history. This cannot be undone.
PianoNicngx-prompt-kit141,243<pk-approval
title="Delete repository"
description="Removes the repository, all branches, and all associated CI history."
action="delete"
severity="destructive"
[parameters]="repoParams"
[pending]="deleting()"
approveLabel="Delete forever"
(approved)="confirmDelete()"
(rejected)="cancel()"
/>Installation
Add the approval component (and the cn() utility) to your project.
ng generate ngx-prompt-kit:approvalComponent API
PkApproval
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | The action being requested (required). |
| description | string | undefined | — | Optional context shown beneath the title. |
| action | string | undefined | — | Verb shown in the badge — e.g. "execute", "send", "delete". |
| severity | "info" | "warning" | "destructive" | "info" | Drives the action badge tint and the Approve button variant. |
| parameters | readonly ApprovalParameter[] | [] | Label/value rows shown beneath the description. Each: { label, value, truncate? }. |
| approveLabel | string | "Approve" | Approve button label. |
| rejectLabel | string | "Reject" | Reject button label. |
| pending | boolean | false | Disables both buttons and shows a spinner on Approve while an async action is in flight. |
| class | string | — | Extra classes for the host. |
PkApprovalParameter
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Parameter name (required). |
| value | string | — | Parameter value, rendered in monospace (required). |
| truncate | boolean | true | Truncate long values with ellipsis. |
Outputs
| Prop | Type | Default | Description |
|---|---|---|---|
| approved | () => void | — | Approve clicked, or Enter pressed while focused. |
| rejected | () => void | — | Reject clicked, or Esc pressed while focused. |