Dialog
A modal window that overlays the main content, requiring user interaction before returning to the parent view.
Basic
A simple dialog with a title, description, and action buttons.
With Form
A dialog containing form inputs for collecting user information.
Usage
julia
using Suite
Dialog(
DialogTrigger(
Button(variant="outline", "Open Dialog")
),
DialogContent(
DialogHeader(
DialogTitle("Dialog Title"),
DialogDescription("A brief description of the dialog purpose."),
),
P("Your dialog content goes here."),
DialogFooter(
DialogClose(Button(variant="outline", "Cancel")),
Button("Confirm"),
),
),
)Keyboard Interactions
| Key | Action |
|---|---|
| Escape | Close the dialog |
| Tab | Cycle focus through focusable elements inside the dialog |
| Shift + Tab | Cycle focus backward through focusable elements |
Accessibility
| Attribute | Applied To | Purpose |
|---|---|---|
| role="dialog" | DialogContent | Identifies the element as a dialog |
| aria-modal="true" | DialogContent | Indicates that the dialog is modal and blocks interaction with the rest of the page |
| aria-describedby | DialogContent | Points to the DialogDescription for screen readers |
API Reference
Dialog
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Dialog sub-components (trigger, content) |
DialogTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | The trigger element that opens the dialog |
DialogContent
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Dialog body content |
| class | String | "" | Additional CSS classes |
DialogHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Header content (title, description) |
| class | String | "" | Additional CSS classes |
DialogFooter
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Footer content (action buttons) |
| class | String | "" | Additional CSS classes |
DialogTitle
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Dialog title text |
| class | String | "" | Additional CSS classes |
DialogDescription
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Dialog description text |
| class | String | "" | Additional CSS classes |
DialogClose
| Prop | Type | Default | Description |
|---|---|---|---|
| children... | Any | - | Close button content |
| class | String | "" | Additional CSS classes |