Documentation - Design System

The Modal component provides a flexible dialog system for displaying content that requires user attention or input. It includes comprehensive accessibility features, focus management, and customizable behaviors.

Modal Sizes

Different modal sizes for various content needs

Code

<Modal size="sm">Small modal content</Modal>
<Modal size="md">Medium modal content</Modal>
<Modal size="lg">Large modal content</Modal>
<Modal size="full">Full modal content</Modal>

Size specifications

Available size options and their dimensions

Small (sm) max-width: 400px Quick confirmations

Medium (md) max-width: 560px Standard content

Large (lg) max-width: 800px Complex forms

Full max-width: calc(100vw - 32px) Immersive experiences

API Reference

Props

Prop	Type	Default	Description
`open`	`boolean`	`false`	Controls modal visibility
`onClose`	`() => void`	-	Callback when modal should close
`size`	`'sm' \\| 'md' \\| 'lg' \\| 'full'`	`'md'`	Modal size variant
`closeOnBackdrop`	`boolean`	`true`	Close modal when clicking backdrop
`closeOnEscape`	`boolean`	`true`	Close modal when pressing Escape
`showClose`	`boolean`	`true`	Show close button in top-right corner
`class`	`string`	`''`	Additional CSS classes

Sizes

Small (sm): 400px max-width, 16px padding - Ideal for confirmations
Medium (md): 560px max-width, 24px padding - Default for most content
Large (lg): 800px max-width, 32px padding - Rich content and forms
Full: Nearly full viewport, 40px padding - Complex workflows

Usage Examples

<script>
  import Modal from '$lib/shared/components/overlays/Modal.svelte';

  let isOpen = false;
</script>

<Modal bind:open={isOpen} onClose={() => isOpen = false}>
  <h2>Modal Title</h2>
  <p>Modal content goes here.</p>
</Modal>

<Modal bind:open={formOpen} size="md" onClose={() => formOpen = false}>
  <h2>Edit Profile</h2>
  <form onsubmit|preventDefault={handleSubmit}>
    <div class="form-field">
      <label>Name</label>
      <input type="text" bind:value={name} />
    </div>
    <div class="modal-actions">
      <button type="submit">Save</button>
      <button type="button" onclick={() => formOpen = false}>Cancel</button>
    </div>
  </form>
</Modal>

Confirmation Dialog

<Modal
  bind:open={confirmOpen}
  size="sm"
  closeOnBackdrop={false}
  onClose={() => confirmOpen = false}
>
  <h2>Confirm Deletion</h2>
  <p>Are you sure you want to delete this item? This action cannot be undone.</p>
  <div class="modal-actions">
    <button onclick={handleDelete}>Delete</button>
    <button onclick={() => confirmOpen = false}>Cancel</button>
  </div>
</Modal>

Disable Close Methods

<!-- No backdrop close -->
<Modal
  bind:open={modal1}
  closeOnBackdrop={false}
  onClose={() => modal1 = false}
>
  Content here
</Modal>

<!-- No escape key close -->
<Modal
  bind:open={modal2}
  closeOnEscape={false}
  onClose={() => modal2 = false}
>
  Content here
</Modal>

<!-- No close button -->
<Modal
  bind:open={modal3}
  showClose={false}
  onClose={() => modal3 = false}
>
  Content here
</Modal>