Documentation
Feedback
Guides
Storefront Development

Storefront Development
Storefront development
Overlay

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

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


_10
import { 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';


Design tokens

Local tokenDefault 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

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-overlay
Contributors
2
Photo of the contributor
Photo of the contributor
Was this helpful?
Yes
No
Suggest Edits (GitHub)
Contributors
2
Photo of the contributor
Photo of the contributor
On this page