EmptyState
Represents the component's empty state while the main content is loading.
1 min read
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 |