 Search
components/badge: Badge components/button: Button components/checkbox: Checkbox components/dialog: Dialog components/input: Input components/popover: Popover components/pre: Pre components/radio: Radio components/separator: Separator components/switch: Switch components/table: Table components/textarea: Textarea components/tooltip: Tooltip components/typography: Typography plugins/plugin-nf: Nerd Font Plugin plugins/theme-catppuccin: Catppuccin Theme plugins/theme-gruvbox: Gruvbox Theme plugins/theme-nord: Nord Theme start/ascii-boxes: ASCII Boxes start/changelog: Changelog start/intro: Introduction start/intro: ## Features start/plugins: Plugins start/plugins: ## Official Plugins start/plugins: ### Themes start/plugins: ## Community Plugins contributing/style-guide: Style Guide contributing/style-guide: ## CSS Units contributing/style-guide: ## Selectors contributing/style-guide: ## Documentation plugins/plugin-dev: Developing Plugins plugins/plugin-dev: ### Style Layers contributing/contributing: Contributing contributing/contributing: ## Local Development contributing/contributing: ## Issues contributing/contributing: ## Pull Requests start/tuis-vs-guis: TUIs vs GUIs start/tuis-vs-guis: ## Monospace Fonts start/tuis-vs-guis: ## Character Cells installation/nextjs: Next.js installation/vite: Vite start/theming: Theming start/theming: ## CSS Variables start/theming: ### Font Styles start/theming: ### Colors start/theming: ### Light & Dark start/theming: ## Theme Plugins start/theming: ### Using Multiple Theme Accents start/installation: Installation start/installation: ## Installation start/installation: ## Using CSS start/installation: ## Using ESM start/installation: ## Using a CDN start/installation: ## Full Library Import start/installation: ### CSS start/installation: ### ESM start/installation: ### CDN installation/astro: Astro installation/astro: ## Scoping installation/astro: ### Frontmatter Imports installation/astro: ### <style> tag installation/astro: ### Full Library Import

Dialog

A dialog

1 <dialog id="dialog" popover>
2 <div box-="round" id="content">
3 <p>Are you sure you want to delete this?</p>
4 <div id="buttons">
5 <button box-="round">Cancel</button>
6 <button box-="round">Delete</button>
7 </div>
8 </div>
9 </dialog>
10 <button popovertarget="dialog">Open Dialog</button>
1 dialog::backdrop {
2 background-color: rgba(0, 0, 0, 0.5);
3 }
4 #content {
5 display: flex;
6 flex-direction: column;
7 gap: 1lh;
8 padding: 2lh 2ch 1lh 2ch;
9 background-color: var(--background1);
10 }
11 #buttons {
12 display: flex;
13 gap: 1ch;
14 justify-content: flex-end;
15 }

Import

@import "@webtui/css/components/dialog.css";

Usage

<dialog>
    <div>Dialog content</div>
</dialog>

See the MDN Reference on how to show and hide <dialog> elements

Examples

Positioning

Use the position- property to control the position of the dialog

Pass two values into position- to set the horizontal and vertical position anchor

<dialog position-="<anchor>"></dialog>
<dialog position-="<x-anchor> <y-anchor>"></dialog>

<dialog position-="center"></dialog>
<dialog position-="start end"></dialog>
1 <div class="row">
2 <dialog id="start" position-="start" popover>start</dialog>
3 <button popovertarget="start">start</button>
4
5 <dialog id="center-start" position-="center start" popover>end start</dialog>
6 <button popovertarget="center-start">center start</button>
7
8 <dialog id="end-start" position-="end start" popover>end start</dialog>
9 <button popovertarget="end-start">end start</button>
10 </div>
11
12 <div class="row">
13 <dialog id="start-center" position-="start center" popover>start center</dialog>
14 <button popovertarget="start-center">start center</button>
15
16 <dialog id="center" position-="center" popover>center</dialog>
17 <button popovertarget="center">center</button>
18
19 <dialog id="end-center" position-="end center" popover>end center</dialog>
20 <button popovertarget="end-center">end center</button>
21 </div>
22
23 <div class="row">
24 <dialog id="start-end" position-="start end" popover>start end</dialog>
25 <button popovertarget="start-end">start end</button>
26
27 <dialog id="center-end" position-="center end" popover>center end</dialog>
28 <button popovertarget="center-end">center end</button>
29
30 <dialog id="end" position-="end" popover>end</dialog>
31 <button popovertarget="end">end</button>
32 </div>
1
2 dialog::backdrop {
3 background-color: rgba(0, 0, 0, 0.5);
4 }
5 dialog {
6 padding: 1lh 2ch;
7 background-color: var(--background1);
8 }
9 .row {
10 display: flex;
11 gap: 1ch;
12 }
13

Container

Use the container- property to control the container sizing behavior

1 <div class="row">
2 <dialog id="auto" container-="auto" popover>auto</dialog>
3 <button popovertarget="auto">auto</button>
4
5 <dialog id="fill" container-="fill" popover>fill</dialog>
6 <button popovertarget="fill">fill</button>
7 </div>
1
2 dialog::backdrop {
3 background-color: rgba(0, 0, 0, 0.5);
4 }
5 dialog {
6 padding: 1lh 2ch;
7 background-color: var(--background1);
8 }
9

Sizing

Use the size- property to control the max size of the dialog

1 <div class="row">
2 <dialog id="small" size-="small" container-="fill" popover>small</dialog>
3 <button popovertarget="small">small</button>
4
5 <dialog id="default" container-="fill" popover>default</dialog>
6 <button popovertarget="default">default</button>
7
8 <dialog id="full" size-="full" container-="fill" popover>full (esc to close)</dialog>
9 <button popovertarget="full">full</button>
10 </div>
1
2 dialog::backdrop {
3 background-color: rgba(0, 0, 0, 0.5);
4 }
5 dialog {
6 padding: 1lh 2ch;
7 background-color: var(--background1);
8 }
9

Offset

Use the --dialog-offset-x and --dialog-offset-y CSS properties to control the offset of the dialog

1 <div class="row">
2 <dialog id="full" size-="full" container-="fill" popover>no offsets (esc to close)</dialog>
3 <button popovertarget="full">no offsets</button>
4
5 <dialog id="offset" size-="full" container-="fill" popover>offsets (esc or click on backdrop to close)</dialog>
6 <button popovertarget="offset">offsets</button>
7 </div>
1
2 dialog::backdrop {
3 background-color: rgba(0, 0, 0, 0.5);
4 }
5 dialog {
6 padding: 1lh 2ch;
7 background-color: var(--background1);
8 }
9 #offset {
10 --dialog-offset-x: 2ch;
11 --dialog-offset-y: 2lh;
12 }
13

Reference

Properties

  • --dialog-offset-x: The horizontal offset of the dialog
  • --dialog-offset-y: The vertical offset of the dialog
  • --dialog-max-width: The maximum width of the dialog
  • --dialog-max-height: The maximum height of the dialog
#my-custom-dialog {
    --dialog-offset-x: 1ch;
    --dialog-offset-y: 1lh;
}

The --dialog-max-width and --dialog-max-height CSS properties are automatically controlled by the size- variant but can be overridden

Extending

To extend the Dialog stylesheet, define a CSS rule on the components layer

@layer components {
    dialog {
        &[size-="tiny"] {
            /* ... */
        }

        /* ... */
    }
}

Scope

dialog { /* ... */ }