Dialog
Dialogs are windows containing contextual information, tasks, or workflows that appear over the user interface. Depending on the kind of dialog, further interactions may be blocked until the dialog is acknowledged.
Example
Content
The content can be populated by providing the following components to your dialog as children:
header(optional)heading(title, required)divider(optional)content(body, required)button_group(optional)footer(optional)
Examples
A typical dialog with a title, contents, and action buttons can be created like so:
A dismissable dialog forgoes its button_group in favor of rendering a close button at the top right of the dialog.
It is important to note that the heading, header, content, and footer content elements accept any renderable node, not just strings. This allows you to create dialogs for more complex workflows, such as including a form for the user to fill out or adding confirmation checkboxes.
Events
For dialogs, user defined callbacks should be chained with the close function in the on_press handler of the dialog’s action buttons. The following example prints if the dialog’s save or cancel button is clicked.
Dismissable dialogs
Dismissable dialogs support an optional on_dismiss prop that is triggered whenever the dialog’s close button is clicked. Like non-dismissable dialogs, you must chain the close function with whatever callback you provide as onDismiss. If this event callback is not needed, the dismissable dialog will behave normally without passing this callback through.
Visual options
Dialog types
Dialogs can be rendered as modals, popovers, or trays. See the dialog_trigger docs for more information.
Size
Only modal type dialogs support a user defined size prop. Note that the fullscreen and fullscreenTakeover sizes require the dialog_trigger type prop to be set to fullscreen or fullscreenTakeover respectively for container sizing considerations.
API Reference
A dialog is a window containing contextual information, tasks, or workflows that appear over the user interface.
Returns: Element The dialog element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Element | The contents of the Dialog. | |
| size | Literal['S', 'M', 'L'] | None | None | The size of the Dialog. Only applies to "modal" type Dialogs. |
| is_dismissable | bool | None | None | Whether the Dialog is dismissable. |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
Content represents the primary content within a Spectrum container.
Returns: Element The rendered content element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | Any | The content to render within the container. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |
A footer for a document or section.
Returns: Element The rendered footer element.
| Parameters | Type | Default | Description |
|---|---|---|---|
| *children | None | bool | int | str | Element | List[NodeType] | The items to render within the footer. | |
| key | str | None | None | A unique identifier used by React to render elements in a list. |