Dialog
A popup dialog used to convey a message to the user.
Figma Link
- Web Components
- Flutter
Demo
A reusable dialog or modal window with a customizable interface and
functionality.
A dialog should popup either in response to user action or to get the users attention.
The dialog can be shown either as a modal or non-modal dialog. Modal is recommended for most uses.
To show the dialog, call showModal() or show() method:
(document.querySelector("#dialog1") as ZetaDialog)?.showModal();
When shown as a modal, clicking the background barrier will close the modal by default; this can be changed with the closeOnBarrierClicked property.
When the confirm button is clicked, the dialog will close. To change this behavior, you can set the button's type attribute to submit.
Storybook
https://design.zebra.com/web/storybook/?path=/docs/components-dialog--docs
Slots
| Name | Description | Type |
|---|---|---|
| default | Body of dialog; typically text. | text |
| confirm | Button used in footer. Must be of type zeta-button. | zeta-button |
| cancel | Button used in footer. Must be of type zeta-button. | zeta-button |
| other | Button used in footer. Must be of type zeta-button. | zeta-button |
Attributes
| Name | Description | Type | Default |
|---|---|---|---|
| title | Title of the dialog. | undefined | undefined |
| centered | boolean | false | |
| initialOpen | Whether the modal is initially open. | boolean | false |
| flavor | What type of dialog box to show.This will change the icon and icon colour shown in the header.Possible values are:- default: Shows black block icon.- info: Shows purple info icon.- success: Shows green verified icon.- warning: Shows yellow warning icon.- error: Shows red error icon. | 'error' | 'info' | 'warning' | 'default' | 'success' | "default" |
| confirmButtonFlavor | Colour of the confirm button.Possible values are:- primary: Blue background.- positive: Green background.- negative: Red background. | "primary" | "positive" | "negative" | "primary" |
Inherited Attributes
| Name | Description | Type | Default | Inherited From |
|---|---|---|---|---|
| rounded | Whether the component is rounded or sharp.When true, rounded will set the border radius of the first child, and any children with class 'contourable-target' to --radius-minimal.Otherwise, this value will be --radius-none. | boolean | undefined | true | Contourable |
| returnValue | Return value of the dialog. | string | "" | Popup |
| closeOnBarrierClicked | Whether the modal should close when the background barrier is clicked.This is only relevant for modal dialogs, non-modal dialogs do not control their background barrier. | boolean | true | Popup |
| open | Whether component is open or closed. | undefined | undefined | Popup |
CSS Properties
| Name | Description |
|---|---|
| --dialog-width | Width of the dialog. Defaults to 480px. |
| --dialog-max-height | Max height of the dialog. Defaults to 80vh. |
| --dialog-title-font-size | Font size of the dialog title. Defaults to 1.25rem. |
| --dialog-title-line-height | Line height of the dialog title. Defaults to 1.5rem. |
Demo
Widgetbook
https://design.zebra.com/flutter/widgetbook/index.html#/?path=components/dialog/zetadialog/dialog
Inheritance
Object > DiagnosticableTree > Widget > StatelessWidget > ZetaStatelessWidget
Constructors
Creates a Zeta Dialog.
ZetaDialog.new({Key? key, ZetaDialogHeaderAlignment headerAlignment = ZetaDialogHeaderAlignment.center, Widget? icon, String? title, required String message, String? primaryButtonLabel, VoidCallback? onPrimaryButtonPressed, String? secondaryButtonLabel, VoidCallback? onSecondaryButtonPressed, String? tertiaryButtonLabel, VoidCallback? onTertiaryButtonPressed, bool? rounded})
Properties
| Name | Description | Type | Features |
|---|---|---|---|
| hashCode | The hash code for this object. | int | no setter inherited |
| headerAlignment | The alignment of the header. | ZetaDialogHeaderAlignment | final |
| icon | The icon to display in the header. | Widget? | final |
| key | Controls how one widget replaces another widget in the tree. | Key? | final inherited |
| message | The message to display in the content. | String | final |
| onPrimaryButtonPressed | The callback for the primary button. | VoidCallback? | final |
| onSecondaryButtonPressed | The callback for the secondary button. | VoidCallback? | final |
| onTertiaryButtonPressed | The callback for the tertiary button. | VoidCallback? | final |
| primaryButtonLabel | The label for the primary button. | String? | final |
| rounded | Sets rounded or sharp border of the containing box and the icon style. | bool? | final inherited |
| runtimeType | A representation of the runtime type of the object. | Type | no setter inherited |
| secondaryButtonLabel | The label for the secondary button. | String? | final |
| tertiaryButtonLabel | The label for the tertiary button. | String? | final |
| title | The title to display in the header. | String? | final |