EmptyState

Importing

import {
  EmptyState,
  EmptyStateTitle,
  EmptyStateDescription,
  EmptyStateActions,
  EmptyStateFooter,
  EmptyStateGraphic
} from '@customerio/pluma-components/react';

Usage

The EmptyState component can be used to display a message when there is no data to show or when the user has not taken any action yet. For example, when a user has not created any campaigns, you can show an empty state message. Or when the user has applied filters but there are no results, you can show an empty state message.

Ideally, you should provide a title and a description to the EmptyState component. The title, also accepts a icon prop which can be used to display an icon above the title.

Actions

You can also provide actions to the EmptyState component. The actions can be provided via the EmptyStateActions component. The actions should generally be buttons, and contain no more than 2 buttons.

Custom Graphic

You can use the EmptyStateGraphic component to display a custom graphic in the empty state, replacing the default icon. This is useful when you want to provide a more visual representation of the empty state.

Variants

The EmptyState component comes in two variants: default and promotion.

Default Variant

The default variant is the standard empty state presentation, with a centered layout.

Promotion Variant

The promotion variant is designed for highlighting features or capabilities, featuring a more prominent layout with the graphic at the bottom. The title can include an eyebrow badge for additional emphasis.

Footer

The footer should be used to add additional information or links to the EmptyState component.