Structured Modal
Using ModalHeader, ModalBody, and ModalFooter.
Create Project
Enter the details for your new project below.
Form Fields Here
Nested Modals
Stack multiple modals on top of each other. Z-index and interactions are managed automatically.
Parent Modal
This is the first layer. You can open another modal from here.
Critical Action
Confirm Action
Are you absolutely sure? This second modal is now the active focus.
Sizes
Small
A compact 384px wide dialog.
Extra Large
A spacious 896px wide dialog for complex views.
Behaviour
- Clicking the backdrop closes the top-most modal
- Escape closes only the top-most modal
- Focus is trapped inside the active modal
- Body scroll is locked while any modal is open
Usage
@overlays.Modal(overlays.ModalProps{ ID: "id", Size: "md" }) {
@overlays.ModalHeader("Title")
@overlays.ModalBody() {
Content...
}
@overlays.ModalFooter() {
<button>Actions</button>
}
}