Approval

Name: ngx-prompt-kit
Author: PianoNic

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. Built on spartan's card, badge and button; the pending state shows an hlm-spinner.

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.

execute

tableevents_2026_05

limit10000

<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.

send

listq2-newsletter

recipients247 (verified only)

subjectYour 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.

delete

orgPianoNic

repongx-prompt-kit

branches14

workflow runs1,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:approval

It is built on spartan/ui, so add these helm components too: badge, button, card, spinner.

ng g @spartan-ng/cli:ui badge button card spinner

Component 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.