Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreUI componentsOrganisms
EmptyState

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

The EmptyState can be used to represent an empty state.

Overview

Example
Code

Your Cart is empty

Nothing matches with your search


Import

Import the component from @faststore/ui

_10
import { EmptyState } from '@faststore/ui'

Import Styles into your FastStore project

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

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

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

Usage

Example
Code

Your Cart is empty


Props

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-empty-state
titlestringThe EmptyState component's title.
titleIconstring | number | false | true | {} | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalA 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

Design Tokens

Local tokenDefault value/Global token linked
--fs-empty-state-height100%
--fs-empty-state-min-height50vh
--fs-empty-state-padding0 var(--fs-spacing-8)

Nested Elements

Title

Local tokenDefault value/Global token linked
--fs-empty-state-title-margin-bottomvar(--fs-spacing-2)
--fs-empty-state-title-color
var(--fs-color-disabled-text)
--fs-empty-state-title-sizevar(--fs-text-size-lead)

Link

Local tokenDefault value/Global token linked
--fs-empty-state-link-min-width11.875rem

Variants

Rounded

Local tokenDefault value/Global token linked
--fs-empty-state-border-radiusvar(--fs-border-radius)

Default Background Color

Local tokenDefault value/Global token linked
--fs-empty-state-bkg-color-defaultvar(--fs-color-neutral-bkg)

White Background Color

Local tokenDefault value/Global token linked
--fs-empty-state-bkg-color-lightvar(--fs-color-body-bkg)

Customization

data-fs-empty-state
data-fs-empty-state-title
data-fs-empty-state-variant="default | rounded"
data-fs-empty-state-bkg-color="default | white"
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
3
Photo of the contributor
Photo of the contributor
Photo of the contributor
+ 3 contributors
On this page