Empty State

This component can be used to represent an empty state.

Overview

Import the component from @faststore/ui

import { EmptyState } from '@faststore/ui'

Import Styles

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

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>> \| ReactFragment \| 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"