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
_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 |