The Proper UI Anatomy for Alert Components

A detailed design breakdown

There's a structure and order to creating UI components. You must break the component down into anatomical parts to understand this structure. When you design alerts, it's essential to follow the proper anatomy to ensure they'll look and function how users expect.

Modal Alert

A modal alert is not the same as a modal window or sheet. No input components, such as text fields, menus, or chips, are placed inside. It’s strictly dedicated to the dialog message. It explains the system process that’s about to occur and asks them to confirm their decision.

There isn’t an ‘X’ icon to dismiss the modal alert in the corner. Instead, there’s a “Dismiss” or “Cancel” button that users have to click. This is because the modal alert is designed to get users to make a conscious decision. An ‘X’ icon allows them to make an unconscious decision to dismiss it without fully understanding the system process.