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

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

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
Coming Soon

Name	Type	Description	Default
Coming Soon

Name	Type	Description	Default
Coming Soon

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