Empty state

Empty state component is used as a placeholder in place of a table or other data that's currently missing.

#Example

#Usage

#Variants

#Card

The default card variant renders the empty state on a white card with a box shadow. Use this variant when you need contrast against the page background.

#Minimal

The minimal variant renders the empty state without any additional padding, borders or background treatments.

#Text only

In it's simplest form, Empty State renders text only.

#With image

You can add an image to it.

#With image filter

Use imageFilter to determine if the image displays in color (default), or in black and white.

#With actions

You can include call to actions.

#With image and actions

You can do it all.

#Guidelines

#When to use

• Show a placeholder when there's no data to display.

#When not to use

• If the data is still loading, use a skeleton instead.
• If warning about an error while the surrounding content still renders, use an alert instead.

#Props

Inherits margin props.

Name	Default	Description
variant	"card"	"card" | "minimal"Determines if the empty state should have a card background and box shadow.
imageUrl	—	stringURL to an image, which will be displayed above the title.
imageFilter	"default"	"default" | "blackAndWhite"Determines the filter to apply to the image. "blackAndWhite" applies a grayscale filter; "default" applies none.
title	—	stringTitle that describes the empty state in a few words.
titleMarginProps	undefined	Pick< | SpaceProps, | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | >Optional margin props for the title.
message	—	ReactNodeExtended explanation.
messageMaxW	"md"	BoxProps["maxWidth"]Optional max width for the message.
actions	—	ReactNodeCall-to-action buttons or links.