Lay out your application in order to match the environment. Modals attract the user's attention on a specific subject. They create a break with what is going on in the application, enabling a real focus. They are centered on the screen and their purpose leads to an action.
Creation Modal
Creation modals have one goal: enabling users to create an item. These items come in various forms within our platform, it means the creation of any element that contains a number of characteristics to be defined, has to come through a creation modal. Creation modals are composed of three parts:
- A title
- A body with the fields required to create the item
- A validation section
Confirmation Modal
Confirmation modals ensure users understand what they are about to do. They display when an important action is triggered, and just before it actually happens. Confirmation modals help users focus on the action they are about to see done in the application, and give them one last chance to cancel.
- If the action is destructive, ensure the validation button is red.
- If the action is non-destructive, the validation button is green.
When the main action of the modal has been triggered, as the modal is being closed, a toast message display to indicate what has just been done.
See Finance Active's Design System for more details.