Overlay

Overlays provide contextual information on top of the current layer of the interface. They can be interruptive like modals or augmenting like popovers and tooltips.

Overview

A content outside me

Import

Import the component from @faststore/ui

import { Overlay } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/atoms/Overlay/styles.scsss';

Follow the instructions in the Importing FastStore UI component styles tutorial.

Usage

A content outside me

<div>
  A content outside me
  <Overlay />
</div>

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-overlay`

Design Tokens

Local token	Default value/Global token linked
`--fs-overlay-bkg-color`	`rgb(0 0 0 / 20%)`

Customization

For further customization, you can use the following data attributes:

data-fs-overlay

Loader Price