Basic Modals
Standard modal dialogs for user interactions
Standard Sizes
Modal Types
Position Modifiers
Behavior Modifiers
Form Modals
Modals containing forms and isInteractive content
Confirmation Modals
Action confirmation and decision dialogs
Modal vs dialogService — When to Use Which
<Modal> component gives you full Svelte template power via snippets.dialogService is promise-based and requires no template markup, but body content is limited to a plain text message string.Modal (template-based)
- Forms with inputs, selects, checkboxes
- Formatted/multiline text with HTML
- Grids, tables, components in the body
- Custom header/footer layouts
- Two-way data binding with
bind: - Full control over show/hide via
bind:show
dialogService (programmatic)
- Quick confirm/cancel decisions
- Alert notifications (acknowledge and close)
- Single text input prompts
- Sequential dialog chains (await one after another)
- No template markup needed — call from any function
- Returns a Promise with the user's choice
Code Examples
Basic Modal (show/hide)
<script lang="ts">
let showModal = $state(false);
</script>
<Button onclick={() => showModal = true}>
Open Modal
</Button>
<Modal bind:show={showModal} titleText="My Modal">
<Paragraph>Modal body content here.</Paragraph>
{#snippet footer()}
<Button variant="secondary"
onclick={() => showModal = false}>
Cancel
</Button>
<Button variant="primary">Save</Button>
{/snippet}
</Modal>Form Modal
<Modal bind:show={showForm}
titleText="Edit Profile" size="lg">
<Grid>
<Column size="100" md="1-2">
<FormGroup>
<FormLabel>Name</FormLabel>
<Input bind:value={name} />
</FormGroup>
</Column>
<Column size="100" md="1-2">
<FormGroup>
<FormLabel>Email</FormLabel>
<Input type="email" bind:value={email} />
</FormGroup>
</Column>
<Column size="100">
<FormGroup>
<FormLabel>Bio</FormLabel>
<Textarea bind:value={bio} rows={3} />
</FormGroup>
</Column>
</Grid>
{#snippet footer()}
<Button variant="secondary"
onclick={() => showForm = false}>
Cancel
</Button>
<Button variant="primary"
onclick={handleSave}>
Save Changes
</Button>
{/snippet}
</Modal>Prevent Close (beforeCloseCallback)
<script lang="ts">
let showModal = $state(false);
let hasUnsavedChanges = $state(false);
function beforeClose(): boolean {
if (hasUnsavedChanges) {
return false; // Prevent closing
}
return true; // Allow closing
}
</script>
<Modal bind:show={showModal}
titleText="Edit Document"
beforeCloseCallback={beforeClose}>
<Input oninput={() =>
hasUnsavedChanges = true} />
{#snippet footer()}
<Button variant="secondary" onclick={() => {
hasUnsavedChanges = false;
showModal = false;
}}>Discard</Button>
<Button variant="primary"
onclick={save}>Save</Button>
{/snippet}
</Modal>Scrollable + Static + Variants
<!-- Scrollable body -->
<Modal bind:show={showTerms}
titleText="Terms of Service"
isScrollable size="lg">
<div style="height: 2000px;">
Long scrollable content...
</div>
{#snippet footer()}
<Button variant="primary"
onclick={() => showTerms = false}>
Accept
</Button>
{/snippet}
</Modal>
<!-- Static (no ESC / backdrop close) -->
<Modal bind:show={showProcessing}
isStatic shouldShowClose={false}>
<Spinner size="lg" />
Processing...
</Modal>
<!-- Themed header only -->
<Modal bind:show={showDanger}
titleText="Delete Item"
headerVariant="danger">
Are you sure?
{#snippet footer()}
<Button variant="danger">Delete</Button>
{/snippet}
</Modal>
<!-- Full modal theme -->
<Modal bind:show={showSuccess}
titleText="Done!" variant="success">
Operation completed.
</Modal>API Reference
Modal Props
| Prop | Type | Default | Description |
|---|---|---|---|
show | boolean (bindable) | false | Show/hide the modal |
size | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | 'fw' | 'md' | Modal width |
variant | 'primary' | 'success' | 'warning' | 'danger' | 'info' | - | Full modal theming |
headerVariant | same as variant | - | Header-only theming |
position | 'center' | 'top' | 'center' | Vertical position |
isScrollable | boolean | false | Scrollable body content |
isStatic | boolean | false | Prevents ESC/backdrop close |
titleText | string | - | Modal title |
shouldShowClose | boolean | true | Show close button in header |
shouldCloseOnEscape | boolean | true | Close on ESC key |
beforeCloseCallback | () => boolean | void | - | Return false to prevent closing |
onclose | () => void | - | Called after modal closes |
class | string | '' | Additional modal classes |
bodyClass | string | '' | Additional body classes |
footerClass | string | '' | Additional footer classes |
Snippet Slots
| Snippet | Description |
|---|---|
header | Custom header content (replaces default title) |
children | Modal body content (default slot) |
footer | Footer content (typically action buttons) |
Small Modal
This is a small modal dialog. Perfect for quick notifications or simple confirmations.
Medium Modal
This is a medium-sized modal dialog. Great for forms and detailed content.
You can include multiple paragraphs, lists, and other content here.
- Feature 1
- Feature 2
- Feature 3
Large Modal
Column 1
Large modals are perfect for complex content layouts with multiple columns.
You can use the PureCSS grid system inside modals to create sophisticated layouts.
Column 2
This second column demonstrates how you can organize content in larger modal dialogs.
Extra Large Modal
Column 1
Extra large modals provide ample space for comprehensive content displays.
Perfect for data tables, reports, and detailed analytics dashboards.
Column 2
You can display complex data structures, charts, and visualizations.
Column 3
Three-column layouts work beautifully in extra large modals.
Ideal for comparison views and side-by-side content.
XXL Modal - Maximum Size
Section 1
XXL modals are the largest available size at 90rem (1440px) wide.
Perfect for full-featured application interfaces within a modal.
Section 2
Ideal for complex workflows that require maximum screen real estate.
Section 3
Four-column layouts provide exceptional flexibility for content organization.
- Dashboard views
- Complex forms
- Data comparisons
Section 4
On smaller screens, these columns will stack responsively.
Full Width Content Area
You can also use the full width for single-column content when needed. This is particularly useful for wide tables, code editors, or visual design tools.
Nested cards and components work seamlessly within XXL modals, allowing you to create rich, isInteractive interfaces.
Full Width Modal - Maximum Screen Coverage
Navigation
- Dashboard
- Analytics
- Reports
- Settings
Main Content Area
Full-width modals are perfect for complex applications that need to run within a modal context. Examples include:
- Code Editors: Full IDE-like experiences
- Design Tools: Canvas-based applications
- Data Analysis: Large spreadsheets or pivot tables
- Media Galleries: Full-screen photo/video management
- Document Viewers: PDF readers, document editors
| Feature | Description | Status |
|---|---|---|
| Responsive | Adapts to all screen sizes | Active |
| Full Screen | Maximizes available viewport | Active |
| Modal Border | Maintains 1rem margin | Configured |
Properties
✓ Success!
Your action has been completed successfully!
⚠ Warning
Please review your action before proceeding.
🔥 Danger Zone
This action is potentially destructive.
Contact Us
Sign In
Settings
General Settings
Privacy Settings
Confirm Delete
Are you sure you want to delete this item?
Confirm Action
Do you want to proceed with this action?
This will update your preferences and may affect other users.
Information
Here's some important information you should know:
- Feature access will be limited after expiration
- Your data will remain safe for 30 days
- You can renew at any time
Centered Modal (Default)
This is the default modal behavior - centered vertically and horizontally in the viewport.
This works well for most use cases where you want the modal to be the focal point.
Top-Aligned Modal
This modal uses the position="top" prop to position it near the top of the viewport.
This is useful for:
- Search interfaces (similar to command palette)
- Quick actions that don't need full attention
- Modals that might contain tall content
- Better visual flow when content extends below fold
Static Modal
This modal cannot be closed by:
- Pressing the Escape key
- Clicking the backdrop
You must click a button below to close this modal.
Scrollable Modal
This modal has a scrollable body. The header and footer stay fixed while the body content scrolls.
Useful for long content like terms of service, license agreements, or lengthy forms.
Paragraph 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 2: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 3: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 4: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 5: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 6: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 7: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 8: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 9: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 10: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 11: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 12: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 13: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 14: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Paragraph 15: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Edit Document
This modal uses beforeCloseCallback to prevent closing when there are unsaved changes.
Type something below, then try closing the modal via the X button, ESC key, or backdrop click.