Portal

The Portal component renders children into a document container while preserving an inline fallback when needed.

Usage & Examples

Inline Fallback

Rendered inline while portal behavior is disabled.
inline-fallback.tsx
<Portal disabled>
    <span>Rendered inline while portal behavior is disabled.</span>
  </Portal>

Interaction states

Disabled
Rendered inline while portal behavior is disabled.
interaction-states.tsx
// Disabled
<Portal disabled disabled>
    <span>Rendered inline while portal behavior is disabled.</span>
  </Portal>

Props API

9 props
Columns
Portal props API
Default
Description
childrenReactNodeNoprops—Content rendered into the target container.
classNamestringNostyling—Optional class name for the portal wrapper.
containerstring | Element | DocumentFragment | nullNoprops—Element, selector, or null target for the portal.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
disabledbooleanNopropsfalseWhether the portal should render in place instead of using createPortal.
renderInlineUntilMountedbooleanNopropsfalseWhether children should render before the target is available.
srOnlyClassNamestringNoprops—Additional class name for screen-reader-only content.
srOnlyTextReactNodeNoprops—Optional content rendered for assistive technologies only.
testIdstringNopropsdataTestId ?? "portal"Optional test ID for testing frameworks.