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.

Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License