Feedback

InlineConfirm

In-flow confirmation for reversible actions without modal interruption.

import { InlineConfirm } from '@lostgradient/cinder';
01

Overview

Reference usage

InlineConfirm keeps a confirmation in document flow for reversible actions. It uses a labelled role="group", focuses Cancel on open, and restores focus to the trigger when dismissed.

Usage

svelte 
<script lang="ts">
  import { Button } from '@lostgradient/cinder';
  import { InlineConfirm } from '@lostgradient/cinder';

  let open = $state(false);

  function removeWorkspace() {
    open = false;
  }
</script>

<Button variant="danger" onclick={() => (open = true)}>Remove workspace</Button>
<InlineConfirm
  prompt="Remove this workspace?"
  confirmLabel="Remove workspace"
  bind:open
  destructive
  onConfirm={removeWorkspace}
/>
Live preview

Basic inline confirmation

Remove this workspace?

02

When to use

Use when
  • Confirming a reversible action in the same flow as its trigger.
Avoid when
  • The action requires modal interruption or extensive consequences; use ConfirmDialog.
03

Examples

Basic inline confirmation

Confirm a destructive action without leaving the current flow.

04

Props

Props for inline-confirm
Name
Type
Default
Description
prompt required text Confirmation prompt text.
confirmLabel required text Label for the confirming action.
cancelLabel text 'Cancel' Label for the cancelling action. Defaults to 'Cancel'.
destructive boolean false Marks the confirming action as destructive. Defaults to false.
open bindable boolean false Whether the confirmation is open. Bindable, and component-owned on close: confirming, clicking Cancel, and pressing Escape all set this to false before calling onConfirm/onCancel, so a bound parent observes the confirmation as already closed by the time either callback runs—neither callback can veto or delay that close. Defaults to false.
onConfirm () => void Called when the user confirms the action, after open is already set to false.
onCancel () => void Called when the user cancels the action (via the Cancel action or Escape), after open is already set to false.
children snippet Additional content rendered below the prompt, above the confirm/cancel actions, while the confirmation is open.