EmptyState

EmptyState are used to inform the user when there is no data to display (either because of an error and we cannot retrieve it or because we have an empty result set).

View source code

Use an Icon

Use the iconName prop to set the icon.

Split your payable into multiple lines.

You can split your transaction across several expense accounts and VAT lines to best prepare your export.

<EmptyState
  actions={<Button text="Discover" variant="primaryBrand" />}
  iconName="sparkle"
  subtitle={`You can split your transaction
across several expense accounts and VAT lines to best
prepare your export.`}
  title="Split your payable into multiple lines."
/>

Icon Variant

Use the iconVariant to change the variant of the prop iconName. iconVariant comes with six visual styles: primary, alert, warning, info (default), success, and neutral.

Split your payable into multiple lines.

You can split your transaction across several expense accounts and VAT lines to best prepare your export.

<EmptyState
  actions={<Button text="Discover" variant="primaryBrand" />}
  iconName="triangle-warning"
  iconVariant="warning"
  subtitle={`You can split your transaction
across several expense accounts and VAT lines to best
prepare your export.`}
  title="Split your payable into multiple lines."
/>

Use an Illustration

Use the illustration to set an illustration instead of an Icon. illustration accepts a ReactNode to let you customize and use any node.

<EmptyState
  actions={<Button text="Discover" variant="primaryBrand" />}
  illustration={<img alt="" src="/icon.svg" />}
  subtitle={`You can split your transaction
across several expense accounts and VAT lines to best
prepare your export.`}
  title="Split your payable into multiple lines."
/>