Display popup content that requires attention or provides additional information. If you just need to prompt for a text message, try component Toast.
The Modal contain an additional Hooks, see subsection useModal for details.
Use visible control whether Modal is displayed.
Use hooks for easier control Modal.
Hide all action buttons.
Disable one of the buttons.
Custom width or className.
You can use loading in Modal.Action with the property loading.
Whether it is desktop or mobile, the content beyond the scope has been well handled.
Name the action on both buttons, say what is lost, and show progress on the one that runs it.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| visible | open or close | boolean | - | false |
| onClose | open event | () => void | - | - |
| onContentClick | event from modal content | (e: MouseEvent) => void | - | - |
| wrapClassName | className of the modal dialog | string | - | - |
| keyboard | press Esc to close modal | boolean | - | true |
| disableBackdropClick | click background and don't close | boolean | - | false |
| role | use alertdialog for a message that needs an answer | 'dialog' / 'alertdialog' | - | dialog |
| aria-label | name of the dialog when there is no Modal.Title | string | - | - |
| ... | native props | HTMLAttributes | 'autoFocus', 'name', 'className', ... | - |
The dialog is named by Modal.Title and described by Modal.Subtitle on its own. Without a title, pass aria-label or aria-labelledby.
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| ... | native props | HTMLAttributes | 'id', 'className', ... | - |
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| passive | display passive mode | boolean | - | false |
| disabled | disable current action | boolean | - | false |
| onClick | click handler | (e: ModalActionEvent) => void | - | - |
| loading | show loading | boolean | - | false |
| ... | native props | ButtonHTMLAttributes | 'id', 'className', ... | - |
type useModal = (initialVisible: boolean) => {
visible: boolean
setVisible: Dispatch<SetStateAction<boolean>>
currentRef: MutableRefObject<boolean>
bindings: {
visible: boolean
onClose: () => void
}
}
type ModalActionEvent = MouseEvent<HTMLButtonElement> & {
close: () => void
}