Skip to content
EvolveEvolveEvolve

ProductAvailabilityStatus

Whether a product can be had, as a product page states it: an icon and a label, coloured by tone. data-availability carries the schema's state for a brand.

import { ProductAvailabilityStatus } from "@evolve-storefront/feature-product/product-availability";

Renders inside ProductListingProvider.

Preview

In StockOpen in Storybook ↗

Usage

<ProductAvailabilityStatus availability={variant.availability} />;

Props

PropTypeDescription
availabilityProductAvailability | null | undefined

Renders nothing when absent: an unknown state is no reason to claim one.

Any other props go to the root element, like on a plain HTML element.

Examples

VariantsEvery state at once, so a brand sees the tones side by side.
<ProductAvailabilityStatus availability={variant.availability} />;
Open in Storybook ↗