Skip to content

Modals

We use modals as components for displaying specific information directly related to the content item currently checked which needs interaction from the user.

Introduction

Right below you have a modal (with interaction removed). This use case contains the three standard elements that we usually add to it: `modal-header`, `modal-body`, and `modal-footer`. All of our modals include a `modal-header`s with dismiss actions as standard best practice. Often (but not always) they also have explicit dismiss action buttons.

Note

The objective of this component is to showcase modal structures. Content inside them is representative, but not an accurate representation of a real use case.

Modal sample

[[code_example {html} code_example]]

Note

Remember when combining two buttons together to emphasize the preferred primary action button. We add class font-weight-bold for the primary button. Check more in Buttons - Set of two buttons.

Send to Trash modals

Removing and deleting content are important actions in our application. Whereas in the former case the Content item is later retrievable from the Trash, in the second case the Content item is completely erased. Given the significant effects that these actions can have, their purpose have to be highlighted with a specific group of modals.

Send to Trash

Use it when removing content created by the user that will be sent to Trash.
[[code_example {html} code_example]]

All Send to Trash modals should have the same styling in order to help users quickly identify what the modal's message is about. We don't add .modal-title to the header and we position .modal-footer set of two buttons to the right.

![Content structure](../img/UIG_Component_Modal_correct.png)
Yes

![Content structure](../img/UIG_Component_Modal_wrong.png)
No

Modals with headers

We recommend using them when you have to display listed information in tables and you want users to interact with the information contained within that specific table through action buttons (either the whole row or specific buttons). Hence, there is no need to add more interaction buttons, like in `.modal-footer`.

[[code_example {html} code_example]]

Modals with headers and footers

We display them when users need to add or modify specific settings of a content item. This modal includes buttons within its `.modal-footer` due to the need of having an action button that submits changes added or defined.