First Name

Dialog (Modal)

Container to display content in an overlay window.

Purpose

Modals are a flexible container used to display information or additional content on top of an application's surface.

View on PrimeNG

Get the Figma Asset

Get Documentation

Usage

When to use

Bring the user's immediate attention to an important detail or issue
Confirming changes
Warnings based on an action (ex. "Are you sure you want to delete? This cannot be undone.")

When not to use

Providing error or success messages

Video Recap

Best Practice

Example One

Enable the user to close "X" in the top right corner.

Example Two

Label the action of the modal in the header.

Example Three

Place the primary button on the bottom left that will confirm the action or change described within the modal.

Example Four

If a primary and destructive button are within the same modal, place the primary button on the bottom left and the destructive button on the bottom right.

Winsupply Standards

Testing Demo

Test

testing content here testing content here

Right Aligned Numbers

$21,344.00 |

Numbers in a table like cost, quantity and price are right aligned inside of a table.

Date Format

00/00/2024

Across all domains, the date format should be listed in this way to ensure consistency.

Incorrect Usage

Example One

Using a modal where an error or toast message can be used.

Example Two

Stacking modals on top of other modals.

Dialog (Modal)