Modal trigger
Internal use only. These components are available only within Atlassian.Before you start
ModalContextProvider is required at the top of your application, above this trigger.
Read the original modal dialog usage documentation first.
See Entry Points for shared asynchronous usage guidelines and the internal API documentation.
Asynchronous usage
Identify the modal before its content loads
Provide title on ModalTrigger so the default loading screen has a visible modal title before the
entry point resolves. Provide loadingText to explain what is loading. Keep the loading title
consistent with the title in the loaded content so users know they are still in the same task.
The title prop configures fallback content only. It does not set the title of the loaded
modal. The loaded entry point must render its own title, for example with ModalTitle.
title identifies the default loading and error experiences. loadingText configures the default
loading screen. Custom loading and error fallbacks supply their own titles. The loaded entry point
must render its own modal title. Other modal trigger variants may expose different prop names; use
this component's Code tab as the reference for ModalTrigger.
Connect the trigger to an operable control
Attach the render function's ref to the button that opens the modal. The entry point trigger uses
that element for activation and preloading. Give the button a clear label and
aria-haspopup="dialog". Keep it mounted so users can return to it after closing the modal.
preloadOnFocus defaults to true. Loading can begin before activation, so do not treat preloading
as confirmation that the user has opened the modal or committed to an action.
Keep loading dismissible
Users should be able to leave the modal while its content loads. Preserve the standard close control
and Escape behavior. A custom Fallback replaces the loading content inside the existing modal; it
should supply a title, a meaningful loading message, and a way to cancel using its onClose
callback. Do not render another modal shell inside it.
The loaded entry point receives onClose in its runtime props. Use that callback for its close or
cancel actions so the trigger can close the modal and dispose of its entry point reference.
Handle loading failures
Modal errors use the application-level GlobalModalErrorFallback configured with
initEntryPointConfig; ModalTrigger does not accept an errorFallback prop. Fallback is only
for loading content.
Design the global fallback for any modal entry point that might fail. Report a translated error and provide recovery outside the failing modal when appropriate. The default configuration closes the modal. See the custom error example.
Accessibility
Internationalization
Provide internationalized text for all user-facing messages and accessible labels, including loading states, error states, modal titles, and controls where applicable. Internationalization is required to make this text accessible in the user's language.
Translate the trigger label, title, and loadingText, plus all text in the loaded modal and any
custom fallback. title identifies the default loading and error experiences, but does not render a
title in your loaded modal UI. Use your application's existing internationalization provider to
resolve translated text for the trigger, fallback, and loaded modal. See the
internationalization example.