Empty State

Empty states are messages that users see when there is no data or content to show.

Importing

To use the empty state component, first you need to register the component inside the page. You can register the component manually by importing the register function:

Web (Option 1)

import { register } from "@tapsioss/web-components/empty-state";

register(); // Now the empty state component is ready to use!

Web (Option 2)

import { registerEmptyState } from "@tapsioss/web-components";

registerEmptyState(); // Now the empty state component is ready to use!

Also you can automatically register the component by importing it with the following approach:

Web

import "@tapsioss/web-components/empty-state/element";

TIP

If you want to use all the component in your app, you can call registerAll at the root of your project.

import { registerAll } from "@tapsioss/web-components";

registerAll(); // All the components are now available

In the React package, you can easily add the component using the following code:

React

import { EmptyState } from "@tapsioss/react-components";

Component Usage

Web

<tapsi-empty-state></tapsi-empty-state>

React

<EmptyState />

Properties

Name	Attribute Name	Description	Type	Default Value
title	title	The title of the empty state.	string	""
description	description	The description of the empty state.	string	""
contentAlignment	content-alignment	The alignment of the content.	"center" | "auto"	"auto"

Slots

Name	Value	Description
ICON	icon	The slot for the action.
ACTION	action	The slot for the action.

TIP

The value of slots are available for developer as JavaScript Variables:

Web

// Option 1
import { EmptyStateSlots } from "@tapsioss/web-components";

// Option 2
import { Slots } from "@tapsioss/web-components/empty-state";

React

// Option 1
import { EmptyStateSlots } from "@tapsioss/react-components";

// Option 2
import { Slots } from "@tapsioss/react-components/EmptyState";