Documentation
Feedback
Guides
Storefront Development

Storefront Development
Modal

Modals are dialog windows that sit on top of an application's main view.

Modals are dialog windows that sit on top of an application's main view.
The Modal component is a compound of the following:
  • Modal: Dialog windows with card style base.
  • ModalHeader: Wraps the Modal header. It may contain a title, description and a close button. (Optional)
  • ModalBody: Wraps the Modal body content. (Optional)

Import

Import the component from @faststore/ui

_10
import { Modal, ModalHeader, ModalBody } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/molecules/Modal/styles.scss'


Usage

Example
Code

Props

All modal-related components support all attributes also supported by the <div> tag.
Besides those attributes, the following props are also supported:
NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-modal
aria-labelledbystringIdentifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
isOpenfalse | trueA boolean value that represents the state of the Modaltrue
onDismiss() => voidEvent emitted when the modal is closed
overlayPropsPropsProps forwarded to the `Overlay` component
children*string | number | false | true | {} | ModalChildrenFunction | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalChildren or function as a children
NameTypeDescriptionDefault
title*stringTitle for header modal.
descriptionstringDescription for header modal.
closeBtnPropsPartial<Omit<IconButtonProps, "onClick">>Props for the Close Button component.{}
onClose() => voidFunction called when dismiss button is clicked.
NameTypeDescriptionDefault
children*string | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalChildren or function as a children

Design Tokens

Local tokenDefault value/Global token linked
--fs-modal-position-top30vh
--fs-modal-position-rightvar(--fs-spacing-4)
--fs-modal-position-leftvar(--fs-spacing-4)
--fs-modal-max-widthcalc(var(--fs-grid-breakpoint-desktop) / 3)
--fs-modal-min-heightvar(--fs-spacing-5)
--fs-modal-marginauto
--fs-modal-background-color
var(--fs-color-body-bkg)
--fs-modal-border-radiusvar(--fs-border-radius)
--fs-modal-width-tabletcalc(100vw / 3)
--fs-modal-min-width-tabletcalc(var(--fs-grid-breakpoint-desktop) / 3)
--fs-modal-transition-timingvar(--fs-transition-timing)
--fs-modal-transition-propertytransform
--fs-modal-transition-in-functionease-in
--fs-modal-transition-out-functionease-in

Nested Elements

Header

Local tokenDefault value/Global token linked
--fs-modal-header-paddingvar(--fs-spacing-4) var(--fs-spacing-7) var(--fs-spacing-4) var(--fs-spacing-4)
--fs-modal-header-title-margin-bottom.625rem
--fs-modal-header-title-sizevar(--fs-text-size-lead)
--fs-modal-header-title-weightvar(--fs-text-weight-bold)
--fs-modal-header-title-line-height1.2
--fs-modal-header-description-sizevar(--fs-text-size-body)
--fs-modal-header-description-line-height1.5
--fs-modal-header-description-color
var(--fs-color-text-light)
--fs-modal-header-close-button-position-top0
--fs-modal-header-close-button-position-right0

Body

Local tokenDefault value/Global token linked
--fs-modal-body-paddingvar(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5)

Customization

data-fs-modal
data-fs-modal-state="in | out"
data-fs-modal-header
data-fs-modal-header-close-button
data-fs-modal-header-title
data-fs-modal-header-description
data-fs-modal-body
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