The dialog's primary action can signify a destructive action. Negative dialogs contain two actions.
Do this
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Delete email"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Delete"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
negative
>
Are you sure you want to delete this email and it scheduling interval?
</Dialog>
Don't do this
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Delete email"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Delete"
negative
>
Are you sure you want to delete this email and it scheduling interval?
</Dialog>
Actions
Dialogs require at least one action, with no more than two.
When only one action is provided, it is an acknowledgement action.
When two actions are provided, the primary action is a confirming action, and the secondary a dismissing action.
Non-closable Dialog
Dialog should be closable in most cases, by clicking on the background around the dialog. For other cases, non-closable Dialog can be implemented removing onClose prop. This creates a mandatory action in a workflow.
Do you want to call Jane Doe at (123){'\u00A0'}456–7890?
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Send to Closed?"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Send"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
>
Are you sure you want to send this to closed? You can’t reply to closed{'\u00A0'}messages.
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Confirmation"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Continue"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
>
<pclassName="m-t-0">You are about to save changes to an active template. It may take a while for the changes to take effect in Inventory.</p>
<p>Would you like to continue?</p>
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Delete Report"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Delete Report"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
negative
>
<pclassName="m-t-0">You have 3 scheduled reports for Accounts Receivable Summary by Invoice Type.</p>
<p>Deleting this report will also delete its scheduled reports.</p>
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Deactivation Confirmation"
portal={false}
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
onPrimaryActionClick={()=>{}}
primaryActionName="Deactivate"
negative
>
Once deactivated, serial numbers associated with this item will be deleted and cannot be recovered.
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
portal={false}
title="Discard drafts from this conversation?"
onSecondaryActionClick={()=>{}}
secondaryActionName="Cancel"
onPrimaryActionClick={()=>{}}
primaryActionName="Discard"
/>
Examples with One Acknowledgement Action
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Not in Stock"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Ok"
>
This item is no longer available.
</Dialog>
<Dialog
open
focusTrapOptions={{disabled:true}}
title="Set up Later"
portal={false}
onPrimaryActionClick={()=>{}}
primaryActionName="Ok"
>
No worries. You can always set up TitanPhone later in <Linkprimary>Settings > Phone</Link>.
</Dialog>
Content Guidelines
Write titles as verbs
Titles should have a clear verb + noun question or statement.
Edit customer information
Delete message?
Discard unsaved changes?
Do
Edit the service agreement for this customer
Are you sure you want to remove the invoice?
Delete?
Don't
Make body content concise and actionable
Use imperative verbs when telling users what they need to know or do. Don’t use permissive language like "you can".
Notification emails will be sent to this address.
This cannot be undone.
Do
You can edit the email address where emails will be sent.
Are you sure you want to delete this job? You can’t reverse this.
Don't
Buttons should be clear, predictable, and action-oriented
Users should be able to predict what will happen when they click a button.
Lead with a strong verb that encourages action. Use a verb/noun pair on actions in most cases. Common actions like Save, Close, or Cancel do not require an accompanying nou
Do
Don't
Differences from a Modal
Dialogs are more restrictive in their options relative to modals.
Can only be X-Small in size.
Cannot have scrolling content.
Cannot have the close icon × in the top right.
Must have one or two actions.
The footer can only be right aligned, with only solid-filled buttons.
Only the primary action button can be customized: primary solid or negative solid.
Body content is optional.
Best Practices
Dialogs should only be used if they require the user to be interrupted.
For actions, avoid 'Yes' and 'No' responses.
If an action involves cancelling an operation, it should be the secondary action, usually labeled 'Cancel'.
Like modals, dialogs should be used sparingly. Particularly with one action dialogs.
Related Components
For more complex interactions that require user interruption, use a Modal.
To completely hide the context of the page, use a Takeover component.
For information that does not require user interruption, use a Toast or Banner notification.