The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.
You'll need to manage the
isOpen state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock
State to handle this, but you should handle the state in the component you consume
Dialog in or in a wrapper component.
A few considerations must be made to ensure your use of the
Dialog component is accessible:
Always be sure to provide either
aria-label to your
Dialog component. In most cases you should use
aria-labelledby and pass it the
id of your
Dialog.Header. If there is no text in your header, or you chose not to use a header, you can use
aria-label to describe the purpose of the
Be sure to pass a ref to return the focus back to once the
Dialog closes via the
returnFocusRef prop. In most cases this should be the element that opened the Dialog. If you decide to manage focus within your application and want to bypass Primer React Components from doing so when the
Dialog closes, you can omit the
If you're running into z-index issues or are rendering the component inside of an absolutely positioned element, you can wrap your
Dialog in a React Portal.
You can also pass any non-text content into the header:
Dialog components get the
LAYOUT categories of system props.
Dialog.Header components get
FLEX system props. Read our System Props doc page for a full list of available props.
|isOpen||Boolean||Set whether or not the dialog is shown|
|onDismiss||Function||A user-provided function that should close the dialog|
|returnFocusRef||React ref||The element to restore focus back to after the |
|initialFocusRef||React ref||Element inside of the |
|aria-labelledby||string||Pass an id to use for the aria-label. Use either a |
|aria-label||string||Pass a label to be used to describe the Dialog. Use either a |
Dialog.Header does not take any non-system props.