Documentation
Feedback
Guides
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.

Overview

Example
Code
A content outside me

Import

Import the component from @faststore/ui

_10
import { Overlay } from '@faststore/ui'

Import Styles

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


Usage

A content outside me

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


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-overlay

Design Tokens

Local tokenDefault 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
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
2
Photo of the contributor
Photo of the contributor
+ 2 contributors
On this page