v0.29.2
A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the page until they complete a specific task. Modals Design Guidelines.
Edit the code below to see your changes live!
Setting the variant prop to dialog
results in a simplified version of a Modal. The purpose of a dialog is to act as a safety net for a user attempting a destructive action. Modals–Confirmation Design Guidelines.
Edit the code below to see your changes live!
Prop Name | Type | Default | Description |
---|---|---|---|
actions | object[] |
| Accepts an array of objects with Button props and an additional |
backdrop | boolean | true | Determines if the backdrop is shown. |
closeOnClickOutside | boolean | false | Controls whether |
closeOnEscKey | boolean | true | Controls whether |
header | string |
| Sets visible text that describes the content of the modal. |
isOpen | boolean | false | Determines if the modal/dialog is open. |
onClose | () => void |
| Function that will be called on close events. |
variant | modal | dialog | modal | Determines the modal variant. |
Props ending with * are required