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
import '@faststore/ui/src/components/organisms/OutOfStock/styles.scss'Usage
Props
Out of Stock
| 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