Components
Dialog
A native dialog with modal behavior, bindable visibility, and transitions.
Props
Native attributes and event handlers are forwarded to the underlying dialog element
unless handled by the component.
Use isVisible instead of the native open attribute. The default is true; initialize a bound state to false for an initially closed dialog.
| Prop | Type | Default | Description |
|---|---|---|---|
children | Snippet | undefined | Content snippet rendered by the component. |
class | string | '' | Tailwind classes merged with the theme and variants. |
element | HTMLDialogElement | null | null | Bindable reference to the underlying DOM element. |
inTransition | TransitionProps | undefined | Overrides the opening transition. |
isModal | boolean | true | Uses showModal when true and show when false. |
isVisible | boolean | true | Bindable visibility state. |
outTransition | TransitionProps | undefined | Overrides the closing transition. |
theme | Theme | global theme | Optional local theme override. |
transition | TransitionProps | [noopTransition, {}] | A Svelte transition function and its options. |
variants | string[] | [] | Local variant names or theme references such as button.base. |
Default usage
Import Dialog from sveltewind/components. This example shows its default styling in a usable context.
Loading...Examples
Theme variants
Every variant available for Dialog in the built-in themes is shown below.
compact — Apply the compact variant.
Loading...elevated — Apply the elevated variant.
Loading...flat — Apply the flat variant.
Loading...outline — Apply the outline variant.
Loading...soft — Apply the soft variant.
Loading...spacious — Apply the spacious variant.
Loading...Class overrides
Apply rounded-xl border border-primary-500/40 p-4 locally.
Loading...Props and behavior
Change isModal while retaining the default component styling.
Loading...Content and values
Provide different text, child content, or definitions inside the required parent context.
Loading...Add a transition
Bind isVisible to open and close the dialog; Escape also updates the binding.
Loading...