Modal
A Modal (Dialog) is used to represent information that demands attention and/or action from the users, preventing them from interacting with the rest of the page. It follows the WAI-ARIA Dialog (Modal) Pattern.
Composability
The modal is composed by many parts: Modal, ModalHeader, ModalTitle, ModalDismimiss, ModalContent, ModalFooter, and ModalButton.
Modal
The main component, responsible for holding the state.
Props
Same as div JSX element, and:
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| state | ModalState | Return of useModalState | ✅ | null |
ModalHeader
The header gives the modal context, its usually composed by the ModalTitle and ModalDismiss.
Props
Same as header JSX element.
ModalTitle
Modal heading component.
Props
Same as h1 JSX element.
ModalDismiss
Dismisses the modal.
Props
Same as button JSX element.
ModalContent
The ModalContent is the main part of the modal.
Props
Same as div JSX element.
ModalFooter
The footer usually contains actions.
Props
Same as footer JSX element.
ModalButton
Props
Same as Admin UI Button, and:
| Name | Type | Description | Required | Default |
|---|---|---|---|---|
| dismissModal | boolean | If dismisses the modal on click | 🚫 | false |
Abstracting
The main reason the modal is composable is to enable abstractions. You can create specific modals using the small pieces admin-ui provides. In the example, you can see a confirmation modal that uses this approach:
Styling
Every modal component can receive a className to customize styling.