UI Elements
Modal
An overlay dialog that appears on top of the main content to focus user attention.
Anatomy
The class attribute values represent part names. Other attributes represent their corresponding props.
Svelte
<dialog class="whole" {id} aria-label={ariaLabel} {...attributes} bind:this={element}>
<div class="main">
{children}
</div>
</dialog>Props
Type
(value) indicates the default value for the prop.
TypeScript
interface ModalProps {
children: Snippet<[string]>; // Snippet<[variant]>
open?: boolean; // bindable (false)
closable?: boolean; // (true)
id?: string;
ariaLabel?: string;
attributes?: HTMLDialogAttributes;
element?: HTMLDialogElement; // bindable
styling?: SVSClass;
variant?: string; // bindable (VARIANT.NEUTRAL)
}Additional Props
open- Whether the dialog element is currently displayedclosable- If false, prevents default dialog close events (e.g., pressing Escape key)
Styling
The background color of the dialog element is set to transparent, so you should set the background color on the main part.
To learn more, see Styling.
Variant Management
No automatic switching.
Default Class Name
svs-modal
Exports
Types
TypeScript
type ModalReqdProps = "children";
type ModalBindProps = "open" | "variant" | "element";Others
No additional exports are available.
Examples
The example code uses Tailwind CSS along with SVSClass.
Basic
With Interactive Variant
Preset for Demo
Enter variant as you like