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

Anatomy

ApprovalRequest.Root - Controls approval request visibility.

ApprovalRequest.Content - Renders the approval request surface.

ApprovalRequest.Header - Groups request summary content.

ApprovalRequest.Status - Displays the request status.

ApprovalRequest.Icon - Displays the request icon.

ApprovalRequest.Risk - Displays the request risk level.

ApprovalRequest.Title - Renders the request title.

ApprovalRequest.Description - Renders the request description.

ApprovalRequest.Details - Displays request details.

ApprovalRequest.Footer - Groups request actions.

ApprovalRequest.Cancel - Cancels and closes the request.

ApprovalRequest.Confirm - Confirms and closes the request.