Modal

Dialog windows that sit on top of an application's main view.

Modal is a dialog window that sits on top of an application's main view.

The Modal component consists of the following:

Modal: Provides a dialog window with a 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)
ModalFooter: Wraps the Modal footer that contains buttons for canceling or submitting.

Example

Code

Usage


_10import { Modal, ModalHeader, ModalBody, ModalFooter } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


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

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)`

Local token	Default value/Global token linked
`--fs-modal-footer-padding`	`var(--fs-spacing-3) 0 var(--fs-spacing-3)`
`--fs-modal-footer-box-shadow`	`0 -1px 15px 0 rgb(0 0 0 / 10.2%)`
`--fs-modal-footer-actions-padding`	`var(--fs-spacing-1) var(--fs-spacing-4)`
`--fs-modal-footer-actions-gap`	`var(--fs-spacing-3)`

You can target and override Modal styles using the following data attributes:

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

data-fs-modal-footer

data-fs-modal-footer-actions

data-fs-modal-footer-actions-direction

data-fs-modal-footer-actions-wrap

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

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.
onEntered	`() => void`	Callback function when the modal is opened.
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.
disableEscapeKeyDown	`false \| true`	Disable being closed using the Escape key.	`false`

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

Name	Type	Description	Default
children*	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Children or function as a children
direction	`"horizontal" \| "vertical"`	Layout direction. Default is `horizontal`.	`horizontal`
wrap	`false \| true`	Allows wrapping. Default is `true`	`true`