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.

Pass one of the built-in values ("info", "warning", or "danger") to render the corresponding themed icon. If the built-in options don't satisfy your use case, you can pass a custom React element (such as an icon component) to headerIcon and it will be rendered directly in the icon slot.

#Scrollable content

When dialog content exceeds the available height, the body becomes scrollable. A gradient fade is applied at the edges to soften the transition, indicating that more content exists beyond the visible area.

#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.
headerIcon	undefined	"info" | "warning" | "danger" | ReactElement Icon shown in the dialog header. Use `"info"`, `"warning"`, or `"danger"` for the built-in themed icons, or pass a custom React element to render it directly.
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.
bodyRef	—	React.RefObject<HTMLDivElement> Ref for the ModalBody