Dialog component
Figma Component
Dialog is a type of modal window that appears in front of app content to provide critical information or ask for a decision.
Properties
| Name | Description | Default |
|---|---|---|
| initialFocus | Which element to initially focus. Can be either a number (tabbable index as specified by the order) or a ref. You can set this to a negative number to ignore the initial focus. | - |
| onClose required | Dialog window close callback | - |
| open | Dialog window open state | - |
| size | Dialog layout and size variants. Default is medium. | - |
| trigger | Dialog's visibility trigger element | - |
Note: This table does not include native DOM and React properties like `onClick`, `ref`, `id`, `aria-label` (and many others) supported by this component.
Dialog Custom Width
For medium size dialog, if width prop is provided, it will be used to set the width of dialog. Otherwise it will default to 440px.