Dialog
A modal window presenting content or seeking user input without navigating away from the current context.
<script lang="ts">
import { Dialog, Separator, Label } from "$lib";
import { flyAndScale } from "@/utils";
import { fade } from "svelte/transition";
import { X, LockKeyOpen } from "phosphor-svelte";
</script>
<Dialog.Root>
<Dialog.Trigger
class="inline-flex h-12 items-center
justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
text-[15px] font-semibold text-background shadow-mini transition-colors hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
New API key
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay
transition={fade}
transitionConfig={{ duration: 150 }}
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
/>
<Dialog.Content
transition={flyAndScale}
class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
>
<Dialog.Title
class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"
>Create API key</Dialog.Title
>
<Separator.Root class="-mx-5 mb-6 mt-5 block h-px bg-muted" />
<Dialog.Description class="text-sm text-foreground-alt">
Create and manage API keys. You can create multiple keys to organize
your applications.
</Dialog.Description>
<div class="flex flex-col items-start gap-1 pb-11 pt-7">
<Label.Root for="apiKey" class="text-sm font-medium">API Key</Label.Root
>
<div class="relative w-full">
<input
id="apiKey"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
placeholder="secret_api_key"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
<div class="flex w-full justify-end">
<Dialog.Close
class="inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
Save
</Dialog.Close>
</div>
<Dialog.Close
class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
<div>
<X class="text-foreground sq-5" />
<span class="sr-only">Close</span>
</div>
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<script lang="ts">
import { Dialog, Separator, Label } from "$lib";
import { flyAndScale } from "@/utils";
import { fade } from "svelte/transition";
import { X, LockKeyOpen } from "phosphor-svelte";
</script>
<Dialog.Root>
<Dialog.Trigger
class="inline-flex h-12 items-center
justify-center whitespace-nowrap rounded-input bg-dark px-[21px]
text-[15px] font-semibold text-background shadow-mini transition-colors hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
New API key
</Dialog.Trigger>
<Dialog.Portal>
<Dialog.Overlay
transition={fade}
transitionConfig={{ duration: 150 }}
class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm"
/>
<Dialog.Content
transition={flyAndScale}
class="fixed left-[50%] top-[50%] z-50 w-full max-w-[94%] translate-x-[-50%] translate-y-[-50%] rounded-card-lg border bg-background p-5 shadow-popover outline-none sm:max-w-[490px] md:w-full"
>
<Dialog.Title
class="flex w-full items-center justify-center text-lg font-semibold tracking-tight"
>Create API key</Dialog.Title
>
<Separator.Root class="-mx-5 mb-6 mt-5 block h-px bg-muted" />
<Dialog.Description class="text-sm text-foreground-alt">
Create and manage API keys. You can create multiple keys to organize
your applications.
</Dialog.Description>
<div class="flex flex-col items-start gap-1 pb-11 pt-7">
<Label.Root for="apiKey" class="text-sm font-medium">API Key</Label.Root
>
<div class="relative w-full">
<input
id="apiKey"
class="inline-flex h-input w-full items-center rounded-card-sm border border-dark-10 bg-background px-4 text-sm placeholder:text-foreground-alt/50 focus:outline-none focus:ring-2 focus:ring-foreground focus:ring-offset-2 focus:ring-offset-background"
placeholder="secret_api_key"
type="password"
autocomplete="off"
/>
<LockKeyOpen
class="absolute right-4 top-[14px] text-dark/30 sq-[22px]"
/>
</div>
</div>
<div class="flex w-full justify-end">
<Dialog.Close
class="inline-flex h-input items-center justify-center rounded-input bg-dark px-[50px] text-[15px] font-semibold text-background shadow-mini hover:bg-dark/95 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-dark focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
Save
</Dialog.Close>
</div>
<Dialog.Close
class="absolute right-5 top-5 rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-foreground focus-visible:ring-offset-2 focus-visible:ring-offset-background active:scale-98"
>
<div>
<X class="text-foreground sq-5" />
<span class="sr-only">Close</span>
</div>
</Dialog.Close>
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Structure
<script lang="ts">
import { Dialog } from "bits-ui";
</script>
<Dialog.Root>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.Title />
<Dialog.Description />
<Dialog.Close />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<script lang="ts">
import { Dialog } from "bits-ui";
</script>
<Dialog.Root>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.Title />
<Dialog.Description />
<Dialog.Close />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Controlled Usage
If you want to control or be aware of the open state of the dialog from outside of the component, you can bind to the open prop.
<script lang="ts">
import { Dialog } from "bits-ui";
let dialogOpen = false;
</script>
<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
<Dialog.Root bind:open={dialogOpen}>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.Title />
<Dialog.Description />
<Dialog.Close />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
<script lang="ts">
import { Dialog } from "bits-ui";
let dialogOpen = false;
</script>
<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
<Dialog.Root bind:open={dialogOpen}>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.Title />
<Dialog.Description />
<Dialog.Close />
</Dialog.Content>
</Dialog.Portal>
</Dialog.Root>
Component API
The root component used to set and manage the state of the dialog.
| Property | Type | Description |
|---|---|---|
preventScroll | boolean | Whether or not to prevent scroll on the body when the dialog is open. Default:
true |
closeOnEscape | boolean | Whether to close the dialog when the escape key is pressed. Default:
true |
closeOnOutsideClick | boolean | Whether to close the dialog when a click occurs outside of it. Default:
true |
open | boolean | Whether or not the dialog is open. Default:
false |
onOpenChange | function | A callback function called when the open state changes. Default:
—— undefined |
openFocus | FocusProp | Override the initial focus when the dialog is opened. Default:
—— undefined |
closeFocus | FocusProp | Override the focus when the dialog is closed. Default:
—— undefined |
portal | union | Where to render the dialog when it is open. Defaults to the body. Can be disabled by passing Default:
—— undefined |
| Slot Property | Type | Description |
|---|---|---|
ids | object | The ids of the elements within the component, useful when you don't necessarily want to provide a custom ID, but still want access to the ID being assigned (if any). |
The element which opens the dialog on press.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-dialog-trigger | —— | Present on the trigger. |
The content displayed within the dialog modal.
| Property | Type | Description |
|---|---|---|
transition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
transitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
inTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
inTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
outTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
outTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The state of the dialog. |
data-dialog-content | —— | Present on the content. |
An overlay which covers the body when the dialog is open.
| Property | Type | Description |
|---|---|---|
transition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
transitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
inTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
inTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
outTransition | function | A Svelte transition function to use when transitioning the content in and out. Default:
—— undefined |
outTransitionConfig | TransitionConfig | The configuration to apply to the transition. Default:
—— undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-state | enum | The state of the dialog. |
data-dialog-overlay | —— | Present on the overlay. |
A portal which renders the dialog into the body when it is open.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-portal | —— | Present on the portal. |
data-dialog-portal | —— | Present on the portal. |
A button used to close the dialog.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-dialog-close | —— | Present on the close button. |
An accessibile title for the dialog.
| Property | Type | Description |
|---|---|---|
level | enum | The heading level of the title. Default:
—— undefined |
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-dialog-title | —— | Present on the title. |
An accessibile description for the dialog.
| Property | Type | Description |
|---|---|---|
asChild | boolean | Whether to use render delegation with this component or not. Default:
false |
| Slot Property | Type | Description |
|---|---|---|
builder | object | The builder attributes and actions to apply to the element if using the |
attrs | object | Additional attributes to apply to the element if using the |
| Data Attribute | Value | Description |
|---|---|---|
data-dialog-description | —— | Present on the description. |
🚧 UNDER CONSTRUCTION 🚧