OutOfStock

Displays to users that the product is out of stock.

This OutOfStock 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


_10import { 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:


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

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

Usage

Example

Code

Props

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-out-of-stock`
title	`string`	The Out of Stock Section's title.
subtitle	`string`	Additional message displayed with the title.
inputLabel*	`string`	The email input label.
buttonLabel	`string`	The button label.	`Notify Me`
loadingLabel	`string`	Specifies a label for loading state.	`Loading`
errorMessage	`string`	Error message displayed when error.
disabled*	`false \| true`	Specifies that the submit button should be disabled.
onSubmit*	`(event: React.FormEvent<HTMLFormElement>) => void`	Event emitted when form is submitted.

Design Tokens

Nested Elements

Title

Local token	Default value/Global token linked
`--fs-out-of-stock-title-margin-bottom`	`var(--fs-spacing-0)`
`--fs-out-of-stock-title-line-height`	`1.15`
`--fs-out-of-stock-title-size`	`var(--fs-text-size-lead)`
`--fs-out-of-stock-title-weight`	`var(--fs-text-weight-bold)`
`--fs-out-of-stock-title-color`	`var(--fs-color-neutral-text)`

Message

Local token	Default value/Global token linked
`--fs-out-of-stock-message-column-gap`	`var(--fs-spacing-0)`
`--fs-out-of-stock-message-margin-bottom`	`var(--fs-spacing-3)`
`--fs-out-of-stock-message-line-height`	`1.15`
`--fs-out-of-stock-message-size`	`var(--fs-text-size-base)`
`--fs-out-of-stock-message-weight`	`var(--fs-text-weight-regular)`
`--fs-out-of-stock-message-color`	`var(--fs-color-success-text)`

Button

Local token	Default value/Global token linked
`--fs-out-of-stock-button-width`	`100%`
`--fs-out-of-stock-button-margin-top`	`var(--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