HomeStarbucks Pattern Library



Layer uses React's built in portal method to create a visual stacking layer in the DOM outside the React application. It creates a fixed position full screen element that would commonly be used for creating modal windows, dialogs, and overlays.

By default, it will append itself (and children) to the body element, but can optionally accept another element as the target.


  • childrenany

    The content that will appear in the Layer

  • isOpenbool[false]

    Indicates whether the Layer should be rendered or not

  • targetElementcustom[IS_BROWSER ? document.body : undefined]

    The DOM element to append the Layer to; defaults to the body element