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 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.

#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	—	string URL to an image, which will be displayed above the title.
title	—	string Title that describes the empty state in a few words.
message	—	ReactNode Extended explanation.
actions	—	ReactNode Call-to-action buttons or links.