Empty State

This component can be used to represent an empty state.

Overview

Import the component from @faststore/ui

import { EmptyState } from '@faststore/ui'

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

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

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

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`

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

data-fs-empty-state

data-fs-empty-state-title

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

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