Overlay

Overlays provide contextual information on top of the current layer of the interface.

1 min read

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.

Example

Code

A content outside me

Usage

Import the component


_10import { Overlay } from '@faststore/ui'

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Design tokens

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

Data attributes

You can target and override Overlay styles using the following data attributes:

data-fs-overlay

Props

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