A dialog is modal that requests additional information or acknowledgement from the user in order to complete a task. It often contains a title header, body, and footer with buttons. It's limited to a maximum number of two inputs.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| hasCloseButton | bool | - | true | Used to determine if the dialog should have a close button. |
| onClose | func | - | () => {} | Function to perform when the dialog is closed. |
| subtitle | string | - | '' | A subtitle for the dialog. |
| testSection | string | - | '' | Identifier used to create data-test-section attributes for testing. |
| children | node | yes | - | The body of the dialog to request minimal information from the user. |
| footerButtonList | array | yes | - | Array of buttons used in the footer of the dialog. |
| title | string | yes | - | Main title of the dialog. |
Usage
Dialogs are intented for short user input, like email confirmations or updating passwords, or user acknowledgement, like a Delete confirmation. The close button is optional and can be left off to ensure users acknowledge the information presented. If you need more the a few fields of input, use a Sheet instead.
Best Practices
Do
Use a Dialog to request user acknowledgement or a few data inputs
Don't
Don't use Dialog to prompt users for long forms of information