⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Modal

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

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

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage


Props

All modal-related components support all attributes also supported by the <div> tag.

Besides those attributes, the following props are also supported:

Modal

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

Modal Header

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.

Modal Body

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