🎉 We are thrilled to introduce FastStore v2. If you are looking for documentation of the previous version of FastStore, please refer to FastStore v1.

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

import { OutOfStock } 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/organisms/OutOfStock/styles.scss';

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


Usage


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