Message Dialog

Message Dialogs

Message dialogs give users critical information about a task.

Use message dialogs to:

  • Validate user decisions
  • Report errors
  • Provide the result of a task or state of an application

Message Dialog Variants

You can use a simple message dialog or provide a message dialog with a status icon.

Message Dialog

Message Dialog Without Icon

Message Dialog with Status Icon

Message Dialog With Icon

Message Dialogs

Elements of a Message Dialog

Message Dialog Elements

  1. Title bar (Required): Titles are informative and effectively group the content in the dialog. Do not use general or ambiguous statements like alert, warning or Are you sure?

  2. Primary message (Optional): Primary messages communicate critical information quickly. For example, an error message could contain a primary message stating “Wrong password” or “Could not remove user,” and body text that provides additional information about why the action failed and what the user might do next.

  3. Body (Required): Body text is concise, actionable, and structured to be easily scanned and understood.

  4. Buttons (Required): Buttons allow users to confirm or cancel an action, or acknowledge a message. Button labels help communicate the purpose of the dialog and enable users to make decisions quickly.

Message Dialog Types

Confirmation Dialog

Use a confirmation dialog to validate user decisions and communicate consequences. Confirmation dialogs need to clearly restate the action the user is trying to take and explicitly outline the consequences of that action.

Note: Since confirmation dialogs disrupt user task flow, do not provide confirmation dialogs for actions that are easily reversed or insignificant.

Confirm a non-destructive action

Provide buttons on confirmation dialogs that make it simple for users to understand and confirm their choices. When choosing button labels, use descriptive verbs that clearly indicate the consequence of a selection, like Delete, Save, or Create. Avoid vague labels like OK or Done. Confirmation Dialog 1

Ambiguous title and button labels make it more difficult for the user to understand their options and make a decision. Descriptive title and button labels make it easy for the user to scan the content and make a decision quickly.

Confirm a Destructive Action

Use a warning icon for actions that are difficult or impossible to undo. If an action will seriously impact the system and cannot be undone, use a destructive style button. Otherwise, use a primary button. Confirmation Dialog 2

Error Dialog

Use error dialogs to inform users of problems interrupting normal or expected behavior.

An error message should be actionable, human readable, and answer the following questions:

  • What is the problem?
  • Why did it happen?
  • How can I fix it? Error Dialog 1 Error Dialog 2

Never blame the user. Use passive voice where appropriate to avoid assigning blame.

  • ⛔ You put in the wrong password.
  • ✅ That password wasn’t recognized OR
  • ✅ We didn’t recognize that password.

Passive Dialog

Use passive dialogs to communicate critical information like the status of an application or result of an action. Passive dialog should clearly communicate the issue and any actions required of the user as a result of the issue. Information in a passive dialog should be important, immediately relevant, and either lead to or require action on the user’s part. Passive Dialog Some usage examples include:

  • Notifying a user that an operation may take a long time to complete
  • Notifying a user that a critical process is complete

Note: If information is not critical, don’t use a passive dialog. Instead, use inline notifications or toast notifications.

Message Dialog Status Icons

Icon Use case(s) Usage
status icon pficon-warning-triangle-o Warning: Caution/ Warning of critical information Use on confirmation dialogs or passive dialogs to indicate a higher level of urgency and importance.
status icon pficon-info Acknowledgement: Informs the user of an action or result Use on confirmation or passive dialogs to indicate a lower level of urgency.
status icon pficon-ok Success: Alert the user that the action has been completed Use on passive dialogs to indicate that a process has completed successfully.
status icon pficon-error-circle-o Error: Alert the user that the action has been completed Use on error dialogs to indicate a problem.

Code icon

PatternFly Core Example Not Available

There is no PatternFly-Core code available for this pattern at this time. Links to the JS framework implementations can be seen above.

Visit the Contributing to PatternFly documentation to learn how to contribute the code.