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.
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 |