Empty

Empty state component. This component gives a message when some part or data is empty.

import { Empty } from "rizzui";

Default

The default style of the Empty.

No Data

import { Empty } from "rizzui";

export default function App() {
  return <Empty text="No Data" textClassName="mt-2" />;
}

No Product

You can use it if your product is Empty.

No Product Available

import { Empty, EmptyProductBoxIcon } from "rizzui";

export default function App() {
  return <Empty image={<EmptyProductBoxIcon />} text="No Product Available" />;
}

No Result Found

You can use it if your search is Empty.

No Result Found

import { Empty, SearchNotFoundIcon } from "rizzui";

export default function App() {
  return <Empty image={<SearchNotFoundIcon />} text="No Result Found" />;
}

API Reference

---

Empty Props

Here is the API documentation of the Empty component.

Props	Type	Description	Default
text	string	Set custom text message of the Empty component	__
textClassName	string	Set custom classes for text style	__
image	ReactNode	Add custom image or icon component	__
imageClassName	string	Add custom classes on to the image or icon component's wrapper	__
defaultImageWidth	string number	Set custom width of the default image / icon	184
defaultImageHeight	string number	Set custom height of the default image / icon	152
defaultImageClassName	string	Set custom className of the default image / icon	__
textTag	EmptyTextTags	Here you can use your text tag	"p"
alignment	EmptyAlignment	Set custom text message of the Empty component	"center"
className	string	Add custom classes for extra style	__

Empty Text Tags

type EmptyTextTags = "h2" | "h3" | "h4" | "h5" | "h6" | "p";

Empty Alignment

type EmptyAlignment = "center" | "inlineStart" | "inlineEnd";