Go Main page
Go Main page

Web components

Foundations
Components
About
cover

components

Overlay

v.1.0.0 | Saturn

Usage

The name of the tokens object to style overlay is OVERLAY_STYLES.

You can not change the name of the tokens object.

Overlay component has one way to modify the styles:

  • Variant: modify the styles of the Overlay.

The structure of the OVERLAY_STYLES object is:

Variants

Variants can modify the styles for the Overlay.

The tokens used are:

12345
const OVERLAY_STYLES = {
  [VARIANT]: {
    container?: CommonStyleType;
  }
};

Example

123456789
const OVERLAY_STYLES = {
  [VARIANT]: {
    container: {
      background_color: 'background-color',
      position: 'position',
      z_index: 'z-index'
    };
  }
};
OverlayCode API
Validation StatusUsage