Layer Dialog - Kumo Svelte

<script lang="ts">
  import { Button } from 'kumo-svelte/components/button';
  import { LayerDialog } from 'kumo-svelte/components/layer-dialog';
</script>

<LayerDialog>
  <LayerDialog.Trigger>
    {#snippet child({ props })}<Button {...props}>Open layer dialog</Button>{/snippet}
  </LayerDialog.Trigger>
  <LayerDialog.Content>
    <LayerDialog.Title>Edit profile</LayerDialog.Title>
    <LayerDialog.Description>Update the details associated with this profile.</LayerDialog.Description>
    <LayerDialog.Body>
      <div class="min-h-40">Profile form content</div>
    </LayerDialog.Body>
    <LayerDialog.Actions dismissLabel="Close">
      <LayerDialog.Actions.Primary>Save changes</LayerDialog.Actions.Primary>
    </LayerDialog.Actions>
  </LayerDialog.Content>
</LayerDialog>

Installation

import { LayerDialog } from 'kumo-svelte';

Behavior

LayerDialog renders as a bottom sheet on small screens and a centered dialog on desktop. Set dismissDisabled while asynchronous work is pending. Use LayerDialog.Alert when the user must explicitly choose an action.

Alert dialog

<script lang="ts">
  import { Button } from 'kumo-svelte/components/button';
  import { LayerDialog } from 'kumo-svelte/components/layer-dialog';
</script>

<LayerDialog.Alert>
  <LayerDialog.Trigger>
    {#snippet child({ props })}<Button variant="destructive" {...props}>Delete project</Button>{/snippet}
  </LayerDialog.Trigger>
  <LayerDialog.Content>
    <LayerDialog.Title>Delete project?</LayerDialog.Title>
    <LayerDialog.Description>This action cannot be undone.</LayerDialog.Description>
    <LayerDialog.Body>All deployments and settings will be permanently removed.</LayerDialog.Body>
    <LayerDialog.Actions dismissLabel="Cancel">
      <LayerDialog.Actions.Primary variant="destructive">Delete</LayerDialog.Actions.Primary>
    </LayerDialog.Actions>
  </LayerDialog.Content>
</LayerDialog.Alert>

API Reference

Prop	Type	Default	Description
open	`boolean`	-	Controlled open state.
onOpenChange	`(open: boolean) => void`	-	Called when the open state changes.
dismissDisabled	`boolean`	`false`	Prevents user-initiated dismissal while work is pending.

Prop	Type	Default	Description
size	`'sm' \| 'base' \| 'lg' \| 'xl'`	`"base"`	Desktop dialog width.
verticalAlign	`'top' \| 'center'`	`"center"`	Desktop vertical alignment.
container	`HTMLElement \| string`	-	Portal destination.
closeLabel	`string`	`"Close"`	Accessible label for the automatic close control.