Dialog

Dialog focuses user's attention on additional information and a specific action.

#Usage

#Info

Use the info variant to convey complex information that doesn’t fit into a simple Confirmation Dialog such as lists, tables, and other longer messages.

The info variant has the x in the upper right, and is dismissible by clicking outside of the dialog (this is because we’re not worried about losing user’s inputs).

#Form

Use the form variant whenever the user needs to complete form fields within the body of the dialog.

The form variant does not have the x, and should not be dismissible by clicking outside of the dialog (we don’t want to lose the users’ progress).

#Header icon

While it is preferred to that ConfirmationDialog is used for simple dialogs, a header variant may be specified to change the tone of the Dialog component.

#Guidelines

#When to use

• Use the Dialog to focus user's attention on additional information and a specific action.

#When not to use

• Do not use when confirming dangerous or destructive action, use a Confirmation Dialog instead.

#Usage

• Dialog must never appear on its own without user's interaction (like clicking a button).

#Content

• Use sentence case everywhere.
• Don't punctuate the end of the title.
• Always end a sentence with a period in description.
• Confirmation button text must be explicit and avoid generic words like "Confirm", "Submit", "Yes" or "Send". For example, a good button text would be "Send message".

#Props

Name	Default	Description