Modal Region — Cinder component documentation

Overview

Mount ModalRegion once in a context boundary and call useModal().openModal or useModal().confirm from descendants. State is scoped to the region and safe during SSR.

Usage

<script lang="ts">
  import { Button } from '@lostgradient/cinder/button';
  import { ModalRegion, useModal } from '@lostgradient/cinder/modal-region';
</script>

<ModalRegion>
  {#snippet children()}
    {@const modal = useModal()}
    <Button onclick={() => modal.confirm({ title: 'Confirm action' })}>Open confirmation</Button>
  {/snippet}
</ModalRegion>

Live preview

When to use

Use when

Application code must open deduplicated modals or await a confirmation result imperatively.

Avoid when

A single declarative modal is sufficient; use Modal directly.

Examples

Basic modal region

Mount application content inside the modal coordination region.

Props

Props for modal-region
Name	Type	Default	Description
`children`	`import('svelte').Snippet`