Modal
Overview
When to use
Modal appears on top of the main content and moves the system into a special mode requiring user interaction. It blocks interaction with the main content until an action is taken.
When to consider an alternative
t.b.d.
Component
Default
Size
Programatically close
Unclosable
Pass the unclosable
prop with the open
prop to make the modal only closable via an action
Updating unclosable state
With EntityList
Properties
Default
Property | Type | Required | Default | Description |
---|---|---|---|---|
utilClassNames | String | false | - | |
children | Node | false | - | |
componentRef | Shape {
"current": "Any"
} | false | - | |
size | Enum "default" │ "small" │ "fullscreen" | false | - | |
trigger | Node | false | - | |
header | Node | false | - | |
footer | Node | false | - | |
open | Bool | false | - | |
unclosable | Bool | false | false | |
onClose | Func | false | - | |
onDismiss | Func | false | - | |
returnFocus | Bool | false | false | Returns focus to trigger on dismiss |
bodyPadding | Enum | false | Modal.Spacer.spaceM |