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
Usage
Import the component
_10import { EmptyState } from "@faststore/ui";
Import styles
To apply styles, include the following in your stylesheet:
_10@import "@faststore/ui/src/components/organisms/EmptyState/styles.scss";
For details, see Importing FastStore UI component styles.
Examples
Variants
Rounded
Example
Code
Nothing matches with your search
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) |
Design tokens: 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) |
Design tokens: Link
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-link-min-width | 11.875rem |
Design tokens: Rounded
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-border-radius | var(--fs-border-radius) |
Design tokens: Default background color
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-bkg-color-default | var(--fs-color-neutral-bkg) |
Design tokens: White background color
| Local token | Default value/Global token linked |
|---|---|
--fs-empty-state-bkg-color-light | var(--fs-color-body-bkg) |
Data attributes
You can target and override
EmptyState styles using the following data attributes:data-fs-empty-statedata-fs-empty-state-titledata-fs-empty-state-variant="default | rounded"data-fs-empty-state-bkg-color="default | white"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 |