Approval Request

Ask for a clear decision before an agent performs a consequential action.

Installation

Copy the command below and run it in your terminal.

bunx @sivir-ui/svelte add approval-request

Usage

Control visibility with bind:open. Cancel and Confirm close the modal and fire their onclick callbacks. Use verb-first labels that name the exact action.

import * as ApprovalRequest from '@sivir-ui/svelte/components/approval-request';

let open = $state(false);

<Button onclick={() => (open = true)}>Restart worker</Button>
<ApprovalRequest.Root bind:open risk="medium">
  <ApprovalRequest.Content>
    <ApprovalRequest.Header>
      <ApprovalRequest.Status>
        <ApprovalRequest.Icon />
        <ApprovalRequest.Risk />
      </ApprovalRequest.Status>
      <ApprovalRequest.Title>Restart the production worker?</ApprovalRequest.Title>
      <ApprovalRequest.Description>
        Active jobs may retry on another worker.
      </ApprovalRequest.Description>
    </ApprovalRequest.Header>
    <ApprovalRequest.Footer>
      <ApprovalRequest.Cancel>Keep running</ApprovalRequest.Cancel>
      <ApprovalRequest.Confirm onclick={() => restartWorker()}>
        Restart worker
      </ApprovalRequest.Confirm>
    </ApprovalRequest.Footer>
  </ApprovalRequest.Content>
</ApprovalRequest.Root>

Examples

Match risk to impact. High-risk requests use destructive badge and confirmation styling.

Risk levels