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
_10import { 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
| 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 |
Design Tokens
| 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) |
Nested Elements
Title
| 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) |
Link
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-link-min-width | 11.875rem |
Variants
Rounded
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-border-radius | var(--fs-border-radius) |
Default Background Color
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-bkg-color-default | var(--fs-color-neutral-bkg) |
White Background Color
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-bkg-color-light | var(--fs-color-body-bkg) |
Customization
data-fs-empty-statedata-fs-empty-state-titledata-fs-empty-state-variant="default | rounded"data-fs-empty-state-bkg-color="default | white"