Modal

Component for displaying configuration in a modal window.

Edit settings

Name*

Metadata

This is a field description.

CancelSave

Example

<script>
  import { Modal, Input, MetadataSelector } from '@soleil-se/config-svelte';

  let open = $state(false);
</script>

<button class="btn btn-primary" type="button" onclick={() => (open = true)}>
  Edit settings
</button>

<Modal title="Edit settings" bind:open>
  <Input name="name" label="Name" required />
  <MetadataSelector
    name="metadata"
    label="Metadata"
    description="This is a field description."
  />
</Modal>

The default footer provides Cancel and Save buttons. Save validates fields inside the dialog; if validation succeeds, values are saved and the modal closes. Cancel, Escape, and backdrop clicks close without saving. When resetOnCancel is enabled, content is re-rendered after an unsaved close.

Props

Prop	Type	Description
title required	string | Snippet	Modal title, supplied as text or a Svelte snippet.
open $bindable	boolean	Controls whether the dialog is open. Default: false
element $bindable	HTMLDialogElement	The underlying native dialog element.
resetOnCancel	boolean	Re-renders modal content after closing without saving, discarding unsaved changes. Default: true
closeOnBackdropClick	boolean	Closes the modal when the backdrop is clicked. Default: true
class	string	CSS class added to the modal element.
children	Snippet	Modal content.
footer	Snippet<[actions: ModalActions]>Mer information (actions: ModalActions) => void	Replaces the default Cancel and Save buttons. The snippet receives save and close actions.
onOpen	functionMer information () => void	Called when the modal opens.
onClose	functionMer information () => void	Called when the modal closes, including when dismissed with Escape.
onClosed	functionMer information () => void	Called after the closing transition and any content reset finish.
onSave	functionMer information () => void	Called after the modal content validates and its values are saved.

Footer snippet

Use the footer snippet to replace the default actions. Its save action validates and saves before closing; close dismisses without saving.

<script>
  import { Modal } from '@soleil-se/config-svelte';

  let open = $state(false);
</script>

<Modal title="Confirm changes" bind:open>
  <p>Review the changes before saving.</p>
  {#snippet footer({ save, close })}
    <button class="btn btn-default" type="button" onclick={close}>Cancel</button>
    <button class="btn btn-primary" type="button" onclick={save}>Save</button>
  {/snippet}
</Modal>

Callbacks

The onOpen, onClose, onClosed, and onSave props are callbacks, not component events. onClose runs when the dialog closes, including Escape; onClosed runs after the closing transition and any content reset. onSave runs only after validation succeeds.

Methods

The component instance exposes show(): Promise<void> and close(): void. show() opens the modal, calls onOpen, and focuses the first input, textarea, or select. close() closes without validating or saving.

CSS variable

Set --modal-width to override the default width of 600px:

<Modal title="Edit settings" bind:open --modal-width="800px">
  <Input name="displayName" label="Display name" />
</Modal>

The modal uses the standard field validation registry. See validation for validation timing and behavior.

Snippets

• children: modal body content.
• footer({ save, close }): optional replacement for the default footer actions.