Dialog

Type of popup that presents information and prompts user to make a decision

Image of a dialog box

Example of a dialog box

Anatomy

❖ Delish component

Container: holds interchangeable content

Header text: primary text for the dialog

Content text: interchangeable text

Dismiss button: allows user to close the dialog

Buttons❖ : actions for user to take

Image of card for anatomy

Visual reference for anatomy

Types

There are 2 types of a dialog box: placeholder content and text.

Variants

There are 3 variants of a dialog: with a dismiss button, with checkbox and with multiple actions (up to 3).

Image of 3 variants for dialog.

Visual of variants

Designer resources

Dialog | Delish Universal Library

Figma UI Kit for designers