Inline Confirm — Cinder component documentation

Overview

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

<script lang="ts">
  import { Button } from '@lostgradient/cinder/button';
  import { InlineConfirm } from '@lostgradient/cinder/inline-confirm';

  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

Remove this workspace?

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.

Examples

Basic inline confirmation

Confirm a destructive action without leaving the current flow.

Props

Props for inline-confirm
Name	Type	Default
`prompt` required	`text`
`confirmLabel` required	`text`
`cancelLabel`	`text`	`'Cancel'`
`destructive`	`boolean`	`false`
`open` bindable	`boolean`	`false`
`onConfirm`	`() => void`
`onCancel`	`() => void`
`children`	`snippet`