Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsOrganisms
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

_10
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:

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

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

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
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page