Empty State
This component can be used to represent an empty state.
Overview
Import
Import the component from @faststore/ui
import { EmptyState } from '@faststore/ui'
Import Styles
import '@faststore/ui/src/components/organisms/EmptyState/styles.scss'
Usage
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-state
data-fs-empty-state-title
data-fs-empty-state-variant="default | rounded"
data-fs-empty-state-bkg-color="default | white"