The content of the panel container.

When true, a focus trap is activated so that Tab / Shift+Tab cycles only through interactive elements inside the panel.

Useful for panels that require the user to complete an action before continuing.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The content of the panel header.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The title text content.

Optional icon to display alongside the title.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

An optional breadcrumbs element to display directly above the title. Designed for the @atlaskit/breadcrumbs component (small variant), which is 24px tall. The slot reserves a 24px-tall row and applies the correct gap between the breadcrumbs and title.

An optional cover image to display above the subheader title. Accepts any React node — typically an <img> element, a media component, or a custom image wrapper.

The image fills the full width of the panel and is cropped to a fixed height of 160px.

Accessibility: any <img> passed here must include a meaningful alt attribute describing the image, or alt="" if it is purely decorative, to satisfy WCAG 1.1.1 (Non-text Content). This is not enforced at the type level, so consumers are responsible for providing it.

An optional inline edit control to render in place of the static title, allowing the title to be edited in place. Typically a SubheaderInlineEdit, which is pre-styled to match the title.

When provided, this is rendered instead of the title text. The title prop should still be supplied as the current value passed to the inline edit control.

Optional content shown after the regular subheader scrolls out of view. Accepts any React node. Content is vertically centered in a 2rem-high slot, with 8px bottom padding, no top padding, and 24px inline padding around the slot. Consumers are responsible for content sizing and text truncation. Sticky state, refs, and observation are only mounted when this content is provided.

PanelSubheader must be a direct child of PanelContent for the sticky positioning to work.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The title text to display in the subheader.

An optional icon to display at the start of the title. Accepts any React node — typically an @atlaskit/icon component.

The content of the panel body.

Controls the padding of the panel body.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

The action buttons to display in the footer (e.g. Cancel / Save buttons). Content is laid out in a row with actions aligned to the right, justified space-between.

Optional footer disclaimer content to display below the footer actions.

Use PanelDisclaimer to apply the standard disclaimer styling.

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests.

Appearance style for buttons.

Indicates whether the popup triggered by the action is currently expanded.

Use this when the action opens a popup and the open state is controlled by the consuming experience. Omit when the action does not open a popup.

Identifies the type of popup triggered by the action.

Use "menu" for menu popups, "dialog" for modal or drawer-style dialogs, and "listbox" for listbox popups. Use true only when the popup has menu semantics but a more specific string value is not available.

Aria-label for accessibility.

The content of the action button.

URL for link actions.

Icon component for icon-only buttons.

Label for icon buttons (used for accessibility).

Click handler for button and link actions.

The handler receives both the event and an optional analytics event for tracking user interactions.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Rel attribute for links (e.g., "noopener noreferrer").

Spacing style for icon buttons.

Target attribute for links (e.g., "_blank").

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

The action components to group together.

A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.

Label for icon buttons (used for accessibility).

Click handler for button and link actions.

The handler receives both the event and an optional analytics event for tracking user interactions.

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

URL to open in the new tab.

Label for icon buttons (used for accessibility).

Click handler for button and link actions.

The handler receives both the event and an optional analytics event for tracking user interactions.

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

Label for icon buttons (used for accessibility).

Click handler for button and link actions.

The handler receives both the event and an optional analytics event for tracking user interactions.

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

Label for icon buttons (used for accessibility).

Optional callback that runs before closing the panel. Return false or Promise<false> to prevent the panel from closing. Useful for showing discard confirmation modals when there are unsaved changes.

@example

<PanelActionClose
  onBeforeClose={async () => {
    if (hasUnsavedChanges) {
      const confirmed = await showDiscardModal();
      return confirmed;
    }
    return true;
  }}
/>

Click handler for closing the panel.

Typically, this should trigger the panel close logic. For automatic panel closing via context, use PanelActionCloseSmart instead.

Can be omitted when close behavior is handled externally (e.g., via ref-based modal triggers or other interceptors).

The event parameter provides access to the click event, and the optional analyticsEvent parameter enables analytics tracking.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

Label for icon buttons (used for accessibility).

Optional click handler for additional side effects (e.g., analytics). If provided, it will be called before closing the panel via context.

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

Label for icon buttons (used for accessibility).

Click handler for button and link actions.

The handler receives both the event and an optional analytics event for tracking user interactions.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

Unique string that appears as a data attribute data-testid in the rendered code, often used for automated tests

Child components that will have access to the panel manager

Optional initial state for the panel system.

initialState.panelWidth can seed the provider width during SSR. LayoutWithPanel mirrors its requested width into provider state after mounting. CSS may constrain the visible width without changing the requested value.

Optional instance ID for this panel. If not provided, a unique ID will be automatically generated.

Best Practice: Let Trigger generate the ID automatically unless you need to reference the panel elsewhere (e.g., for programmatic closing). This keeps ID generation co-located with the trigger rather than managed at the manager level.

@example

// Good: Let Trigger generate the ID
<Trigger panel={myEntryPoint} params={{ id: '123' }}>
  {({ ref }) => <button ref={ref}>Open Panel</button>}
</Trigger>

// Also good: Provide ID if you need to reference it elsewhere
<Trigger panel={myEntryPoint} instanceId="my-panel-123" params={{ id: '123' }}>
  {({ ref }) => <button ref={ref}>Open Panel</button>}
</Trigger>

Callback fired when the panel is closed. Useful for analytics tracking.

Callback fired when the panel is opened. Useful for analytics tracking.

Load entry point on focus (for keyboard navigation).

Whether to open the panel on click. Set this to false to keep preloading behaviour without opening the panel on click.

Preload entry point on focus (for keyboard navigation).

Component to render for the active panel. The panel instance is automatically wrapped in PanelContext.Provider, so you can use useCurrentPanel() within your component to access panel data.

@example

<PanelsRenderer>
  <CustomPanel />
</PanelsRenderer>

function CustomPanel() {
  const panel = useCurrentPanel();

  return (
    <PanelContainer>
      <PanelHeader>
        <PanelTitle>{panel.params?.title}</PanelTitle>
        <PanelActionClose />
      </PanelHeader>
      <PanelBody>{panel.params?.content}</PanelBody>
    </PanelContainer>
  );
}

Error fallback function to render when entry point loading fails. Defaults to a simple "Error loading panel" text.

Fallback UI to show while the entry point is loading. Defaults to a skeleton state that indicates header and body content. Can be customised and composed with different skeleton components.

Optional wrapper component to wrap the rendered entry point. Useful for adding styling, resizing functionality, or other wrapper behavior.

@example

<PanelRouter
  wrapper={({ children }) => (
    <Box xcss={styles.panelWrapper}>{children}</Box>
  )}
/>

The active panel, or null when the slot is closed.

Explicit requested/resized width in pixels, retained for the provider's lifetime. Undefined means no saved preference: navigation supplies responsive defaults. This is not the rendered width; available space may constrain it without changing the preference.