Modal Design Component from Outline: Figma Wireframe Kit

Shipfaster: UI Components

Outline Wireframe: UI Components

Modal

Overview

Breadcrumbs are used when you have a large amount of content organised in hierarchical structure with defined categories (multiple sections that can be divided into more sub-sections). An excellent example is e-commerce site, in which a large variety of products is grouped into logical categories. They inform visitors of their current location in relation to the entire site hierarchy. Whereas they also improve the find-ability of site pages. The structure of the site is more easily understood because it is laid out in a breadcrumb.

Modals are used to present critical information or request user input needed to complete a user’s workflow. Modals interrupt a user’s workflow by design. When active, a user is blocked from the on-page content and cannot return to their previous workflow until the modal task is completed or the user dismisses the modal. While effective when used correctly, modals should be used sparingly to limit disruption to the user.

When to use

Use a modal to request information that is preventing the system from continuing a user-initiated process.
Use a modal to notify the user of urgent information concerning their current work. Modal are commonly used to report system errors or convey a consequence of a user’s action.
Use a modal to confirm user decisions. Clearly describe the action being confirmed and explain any potential consequences that it may cause. Both the title and the button should reflect the action that will occur. If the action is destructive or irreversible then use a danger action.

Anatomy

Leading Icon: Supports the modal message visually.
Modal details: Group of title and description which conveys the modal's context and information.
Dismiss Icon: Optionally lets users dismiss the modal.
Actions: Adds necessary actions that the user can take.