EmptyState

Represents the component's empty state while the main content is loading.

The EmptyState can be used to represent an empty state.

Example

Code

Your Cart is empty

Nothing matches with your search

Usage


_10import { EmptyState } from "@faststore/ui";

To apply styles, include the following in your stylesheet:


_10@import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";

Local token	Default value/Global token linked
`--fs-empty-state-height`	`100%`
`--fs-empty-state-min-height`	`50vh`
`--fs-empty-state-padding`	`0 var(--fs-spacing-8)`

Local token	Default value/Global token linked
`--fs-empty-state-title-margin-bottom`	`var(--fs-spacing-2)`
`--fs-empty-state-title-color`	`var(--fs-color-disabled-text)`
`--fs-empty-state-title-size`	`var(--fs-text-size-lead)`

Local token	Default value/Global token linked
`--fs-empty-state-link-min-width`	`11.875rem`

Local token	Default value/Global token linked
`--fs-empty-state-border-radius`	`var(--fs-border-radius)`

Local token	Default value/Global token linked
`--fs-empty-state-bkg-color-default`	`var(--fs-color-neutral-bkg)`

Local token	Default value/Global token linked
`--fs-empty-state-bkg-color-light`	`var(--fs-color-body-bkg)`

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

data-fs-empty-state

data-fs-empty-state-title

data-fs-empty-state-variant="default | rounded"

data-fs-empty-state-bkg-color="default | white"

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-empty-state`
title	`string`	The EmptyState component's title.
titleIcon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	A React component that will be rendered as an icon on the Title.
variant	`"default" \| "rounded"`	Specifies the component border variant.	`default`
bkgColor	`"default" \| "light"`	Specifies the component background color.	`default`