Overview

Use KOverlay to move an element from its original place in the DOM to the overlay container element #k-overlay that is inserted to an application's document body automatically during the KDS installation process . This is often useful for modals, tooltips, dropdowns, or other elements that should appear on top of other content.

Usage

First, check whether you need KOverlay. Some KDS components already utilize it internally and you only need to instruct them to activate it, typically via the appendToOverlay prop.

If you need to use KOverlay, simply wrap an element or a component in it:


      <KOverlay>
        <YourComponent />
      </KOverlay>
    

Related

Slots

Name Description
default
Content to be moved to the overlay container element #k-overlay