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

#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
isOpen	false	boolean Determines whether dialog is open.
variant	—	"info" | "form" Dialog variant.
title	—	string Dialog title.
children	—	ReactNode Dialog content.
actions	—	ReactNode Actions to be displayed in the dialog footer.
width	"md"	"xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "auto" Dialog width.
height	"auto"	ModalContentProps["height"] Dialog height.
maxHeight	"60vh"	ModalContentProps["maxHeight"] Maximum height of the dialog content. It is recommended to keep the max height at 60vh.
onClose	—	() => void Callback for when dialog is closed.