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


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

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


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

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

Example

Code

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

Besides those attributes, the following props are also supported:

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-modal`
aria-labelledby	`string`	Identifies the element (or elements) that labels the current element. @see aria-labelledby https://www.w3.org/TR/wai-aria-1.1/#aria-labelledby
isOpen	`false \| true`	A boolean value that represents the state of the Modal	`true`
onDismiss	`() => void`	Event emitted when the modal is closed
overlayProps	`Props`	Props forwarded to the `Overlay` component
children*	`string \| number \| false \| true \| {} \| ModalChildrenFunction \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Children or function as a children

Name	Type	Description	Default
title*	`string`	Title for header modal.
description	`string`	Description for header modal.
closeBtnProps	`Partial<Omit<IconButtonProps, "onClick">>`	Props for the Close Button component.	`{}`
onClose	`() => void`	Function called when dismiss button is clicked.

Name	Type	Description	Default
children*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Children or function as a children

Local token	Default value/Global token linked
`--fs-modal-position-top`	`30vh`
`--fs-modal-position-right`	`var(--fs-spacing-4)`
`--fs-modal-position-left`	`var(--fs-spacing-4)`
`--fs-modal-max-width`	`calc(var(--fs-grid-breakpoint-desktop) / 3)`
`--fs-modal-min-height`	`var(--fs-spacing-5)`
`--fs-modal-margin`	`auto`
`--fs-modal-background-color`	`var(--fs-color-body-bkg)`
`--fs-modal-border-radius`	`var(--fs-border-radius)`

`--fs-modal-width-tablet`	`calc(100vw / 3)`
`--fs-modal-min-width-tablet`	`calc(var(--fs-grid-breakpoint-desktop) / 3)`

`--fs-modal-transition-timing`	`var(--fs-transition-timing)`
`--fs-modal-transition-property`	`transform`
`--fs-modal-transition-in-function`	`ease-in`
`--fs-modal-transition-out-function`	`ease-in`

Local token	Default value/Global token linked
`--fs-modal-header-padding`	`var(--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-size`	`var(--fs-text-size-lead)`
`--fs-modal-header-title-weight`	`var(--fs-text-weight-bold)`
`--fs-modal-header-title-line-height`	`1.2`

`--fs-modal-header-description-size`	`var(--fs-text-size-body)`
`--fs-modal-header-description-line-height`	`1.5`
`--fs-modal-header-description-color`	`var(--fs-color-text-light)`

`--fs-modal-header-close-button-position-top`	`0`
`--fs-modal-header-close-button-position-right`	`0`

Local token	Default value/Global token linked
`--fs-modal-body-padding`	`var(--fs-spacing-1) var(--fs-spacing-4) var(--fs-spacing-5)`

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