Modal

An alert/dialog box appears with window with button you can click or a just list of options to choose from. Whereas, the user is required to make a choice and whenever an explicit response is needed the user will be kept from doing something else which can be important. You can use it to ask the user to confirm irreversible, destructive and expensive actions which is normally presented in a question form.

1. Design Guideline

Use a modal when you want users to focus on a specific task within the context of the original page.

Modals are broken into three sections: the header, body, and footer.

1. Header - Includes the title and an optional tagline. The title reflects the button text that triggered it. The tagline can contain links, or the entire tagline can be a link

2. Body - You can have any type of content: forms, text, videos, and other media. For a directional modal, you can add a step indicator to indicate the user’s progress

3. Footer - Contains the navigational and action buttons. Action buttons, such as Save, Close, Delete, are on the right. Place the primary button—the one that guides the user toward the default action on the far right. For a directional modal, like a wizard, place the Next and Back navigation buttons on the opposite sides (left for Back and right for Next).

2. Implementation Notes

No content has been added for this component.

3. Reference

No content has been added for this component.