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.

Example

Code

Usage

Import the component


_10import { OutOfStock } from '@faststore/ui'

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Design tokens

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

Data attributes

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

data-fs-out-of-stock

data-fs-out-of-stock-title

data-fs-out-of-stock-message

data-fs-out-of-stock-button

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.

Out of Stock