Documentation
Feedback
Guides
Storefront Development

Storefront Development
Out of Stock

This component is used to announce to users that the product is out of stock.

This component is used to announce to users that the product is out of stock. It also asks for their contact to let they know when the product arrives.## Import
Import the component from @faststore/ui

_10
import { OutOfStock } from '@faststore/ui'

Import Styles

_10
import '@faststore/ui/src/components/organisms/OutOfStock/styles.scss'


Usage

Example
Code

Out of Stock

Notify me when available


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-out-of-stock
titlestringThe Out of Stock Section's title.
subtitlestringAdditional message displayed with the title.
inputLabel*stringThe email input label.
buttonLabelstringThe button label.Notify Me
loadingLabelstringSpecifies a label for loading state.Loading
errorMessagestringError message displayed when error.
disabled*false | trueSpecifies that the submit button should be disabled.
onSubmit*(event: React.FormEvent<HTMLFormElement>) => voidEvent emitted when form is submitted.

Design Tokens

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-out-of-stock-title-margin-bottomvar(--fs-spacing-0)
--fs-out-of-stock-title-line-height1.15
--fs-out-of-stock-title-sizevar(--fs-text-size-lead)
--fs-out-of-stock-title-weightvar(--fs-text-weight-bold)
--fs-out-of-stock-title-color
var(--fs-color-neutral-text)

Message

Local tokenDefault value/Global token linked
--fs-out-of-stock-message-column-gapvar(--fs-spacing-0)
--fs-out-of-stock-message-margin-bottomvar(--fs-spacing-3)
--fs-out-of-stock-message-line-height1.15
--fs-out-of-stock-message-sizevar(--fs-text-size-base)
--fs-out-of-stock-message-weightvar(--fs-text-weight-regular)
--fs-out-of-stock-message-color
var(--fs-color-success-text)

Button

Local tokenDefault value/Global token linked
--fs-out-of-stock-button-width100%
--fs-out-of-stock-button-margin-topvar(--fs-spacing-3)

Customization

data-fs-out-of-stock
data-fs-out-of-stock-title
data-fs-out-of-stock-message
data-fs-out-of-stock-button
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