Modal
Modals are containers that appear with a scrim (semi-transparent overlay) on top of the window or content the user is currently interacting with. Modals draw attention to actions that must be taken before they can be dismissed.
| Class | Type | |
|---|---|---|
modals
|
Modal | A class representing a modal |
Components
Modals consist of five components:
| Class | Type | |
|---|---|---|
modal-form
|
Form | |
modal-header
|
Header | |
modal-title
|
Title | |
modal-content
|
Content | |
modal-footer
|
Footer |
To open or close a modal, use the native <dialog> element’s show(), showModal() and close() methods. For more information, please refer to the MDN documentation.
Sizes
In the Appwrite console, we use three sizes of modals:
| class | Type | |
|---|---|---|
is-small
|
Small | |
| - | Medium | |
is-big
|
Big |
Separate Header
State class which allow to seperate the header with border.
| class | Type | |
|---|---|---|
is-separate-header
|
Add Border bottom to header of Modal |
Best Practice
Modals are used mostly for the creation or deletion of an object. Modals can include avatars, buttons, illustrations, tags and text.
