Dialog

An accessible modal window for focused content or user actions with customizable open/close behavior.

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Checkbox } from '@bejamas/ui/components/checkbox';
4
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@bejamas/ui/components/dialog';
5
import { Label } from '@bejamas/ui/components/label';
6
---
7

8
<Dialog>
9
  <DialogTrigger asChild>
10
    <Button>Manage Cookies</Button>
11
  </DialogTrigger>
12

13
  <DialogContent class="sm:max-w-lg">
14
    <DialogHeader>
15
      <DialogTitle>Manage Cookies</DialogTitle>
16
      <DialogDescription>
17
        Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
18
      </DialogDescription>
19
    </DialogHeader>
20
    <div class="mt-3">
21
      <div class="flex items-center gap-3">
22
        <Checkbox id="cookies-necessary" name="cookies-necessary" disabled checked />
23
        <Label for="cookies-necessary">Strictly Necessary Cookies (always active)</Label>
24
      </div>
25
      <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies are essential for the site to function and cannot be toggled off. They assist with security, user authentication, customer support, etc.</p>
26
    </div>
27
    <div class="mt-3">
28
      <div class="flex items-center gap-3">
29
        <Checkbox id="cookies-analytics" name="cookies-analytics" />
30
        <Label for="cookies-analytics">Analytics Cookies</Label>
31
      </div>
32
      <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us understand how visitors interact with our site. They allow us to measure traffic and improve site performance.</p>
33
    </div>
34
    <div class="mt-3">
35
      <div class="flex items-center gap-3">
36
        <Checkbox id="cookies-marketing-performance" name="cookies-marketing-performance" />
37
        <Label for="cookies-marketing-performance">Marketing Performance Cookies</Label>
38
      </div>
39
      <p class="text-sm text-muted-foreground ml-8 mt-1">These cookies help us measure the effectiveness of our marketing campaigns.</p>
40
    </div>
41
    <DialogFooter>
42
      <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
43
      <Button data-dialog-close class="mt-4">Save changes</Button>
44
    </DialogFooter>
45
  </DialogContent>
46
</Dialog>

Installation

bunx bejamas add dialog

npx bejamas add dialog

pnpm dlx bejamas add dialog

yarn dlx bejamas add dialog

Usage

1
---
2
import { Dialog, DialogTitle, DialogDescription, DialogContent, DialogFooter, DialogClose } from '@bejamas/ui/components/dialog';
3
import { Button } from '@bejamas/ui/components/button';
4
---
5

6

7
<Dialog id="myDialog">
8
  <DialogTrigger>Open Dialog</DialogTrigger>
9
  <DialogContent>
10
    <DialogTitle>Dialog Title</DialogTitle>
11
    <DialogDescription>Dialog description.</DialogDescription>
12
    Content here
13
    <DialogFooter>
14
      <DialogClose>Close</DialogClose>
15
    </DialogFooter>
16
  </DialogContent>
17
</Dialog>

Props

Prop	Type	Default
`defaultOpen`	`boolean`	`false`
`class`	`string`	`""`
`closeOnClickOutside`	`boolean`	`true`
`closeOnEscape`	`boolean`	`true`
`lockScroll`	`boolean`	`true`

Examples

Nested Dialogs

1
---
2
import { Button } from '@bejamas/ui/components/button';
3
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@bejamas/ui/components/dialog';
4
---
5

6
<Dialog>
7
  <Button data-slot="dialog-trigger">Open Nested Dialog</Button>
8
  <DialogContent class="sm:max-w-lg">
9
    <DialogHeader>
10
      <DialogTitle>Nested Dialog</DialogTitle>
11
      <DialogDescription>
12
        Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
13
      </DialogDescription>
14
    </DialogHeader>
15
    <DialogFooter>
16
      <Button data-slot="dialog-close" class="mt-4" variant="outline">Close</Button>
17
      <Dialog>
18
        <Button data-slot="dialog-trigger" class="mt-4">Open Nested Dialog</Button>
19
        <DialogContent class="sm:max-w-md border-red-800">
20
          <DialogHeader>
21
            <DialogTitle>Nested Dialog</DialogTitle>
22
            <DialogDescription>
23
              Using websites and apps involves storing and retrieving information from your device, including cookies and other identifiers.
24
            </DialogDescription>
25
          </DialogHeader>
26
        </DialogContent>
27
      </Dialog>
28
    </DialogFooter>
29
  </DialogContent>
30
</Dialog>

API Reference

Events

The dialog emits custom events that you can listen to:

Event	Detail	Description
`dialog:change`	`{ open: boolean }`	Fired when the open state changes

1
<Dialog id="my-dialog">
2
  <DialogTrigger>Open Dialog</DialogTrigger>
3
  <DialogContent>
4
    <DialogTitle>Title</DialogTitle>
5
    <DialogDescription>Description</DialogDescription>
6
  </DialogContent>
7
</Dialog>

  const dialog = document.getElementById('my-dialog');

  dialog.addEventListener('dialog:change', (e) => {
    console.log('Is open:', e.detail.open);
  });

Programmatic Control

You can control the dialog programmatically by dispatching a dialog:set event:

const dialog = document.getElementById('my-dialog');

// Open the dialog
dialog.dispatchEvent(new CustomEvent('dialog:set', {
  detail: { open: true }
}));

// Close the dialog
dialog.dispatchEvent(new CustomEvent('dialog:set', {
  detail: { open: false }
}));

Data Attributes

The dialog sets these data attributes that you can use for styling or querying state:

Attribute	Element	Description
`data-state`	dialog	Current state (`open` or `closed`)