Behavior

Modals are a way to present additional actions, information or forms in which the original context is important to be maintained.

Modals should appear in the center of the screen and not take up any more then 30-40% of the viewable area. Users should be able to exit modals via an action and or by clicking outside of the modal area.

General considerations:

• Complicated UI layouts & navigation patterns within modals should be avoided.
• Layering modals should be avoided at all costs.

Modals should be used:

• As a means of performing small tasks in the case where original context is important.
• To display critical information.

Standard Modal

Modals can contain graphics, images, inputs, buttons, and other elements. They are often used to create new attributes across the app, for example, a new meeting category type on a meetings show page.

Modal sizes stretch with their content, but should have a vertical scrollbar if it get's too tall.

As a general rule, all modal headers describe the action taking place in the modal and should only have the first word capitalized with the exception of a proper noun as shown in the example below.

Confirmation Modal

Confirmations modals are a means of asking a user if they want to proceed with an action. They are typically used in cases where the action being taken is destructive and non reversible.

The modal should contain:

• A title which sums up the action to be taken.
• A body which further describes the consequences of the action.
• Calls to action to proceed or cancel.

When deleting something that cannot be recovered by the user, it is always a rule that we add a confirm dialogue.