Pluma
About
MCP Server
Getting started
Contributing
Breaking Changes
Changelog
Content
Icons
Motion
Style Utilities
Test Helpers
Tokens
Overview
Status
Accordion
AccordionGroup
Box
Card
CenterBaseline
Divider
EmptyState
Flex
FormLayout
Grid
InlineStack
Panel
Scrollable
Stack
Code
DescriptionList
Emphasis
Heading
List
Paragraph
Strong
Text
TextLabel
Truncated
Avatar
CodeBlock
Coin
Icon
Image
LabelIcon
Breadcrumbs
Link
NavItem
Page
Pagination
PlainLink
SideNav
Tabs
TabNav
Button
ButtonGroup
CloseButton
DropdownMenu
PlainButton
ToggleButton
Checkbox
CheckboxGroup
ColorPicker
Combobox
DatePicker
Form
JsonField
NumberField
OptionCard
OptionCardGroup
Radio
RadioGroup
Search
SegmentedControl
Select
Slider
TextArea
TextField
Toggle
Badge
DataTable
Filters
FormattedDateTime
FormattedRelativeTime
KeyboardShortcut
Label
ProgressBar
ProgressCircle
StatusIndicator
Table
Tag
Banner
PageLoader
SkeletonShape
SkeletonText
Snackbar
Spinner
Blanket
ConfirmationModal
Drawer
Modal
Modal manager
Popover
Tooltip
VisuallyHidden
Anti-patterns
Combobox with Add New
Density
Inline Form Controls
Refinement levers
Search with DropdownMenu
States
Voice
Ember Floating UI
Ember prop spreading
ModalPrimitive
PlumaProvider
PopoverPrimitive
Portal
React Yield
fly-alert
fly-badge
fly-btn
fly-card
fly-close
fly-label
fly-panel
fly-progress
fly-range
fly-spinner
fly-tag
Forms
Lists
Tailwind
Componentsv2.170.1
Iconsv1.15.0
MCPv0.8.18
Tokensv0.34.1

EmptyState

Github
Storybook
Legacy component

EmptyStates notify the user that the content area or page has no data.

Importing

The component can be imported via:

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.

No data available

<EmptyState>
  <EmptyStateTitle>No data available</EmptyStateTitle>
</EmptyState>

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.

No data available

Try adjusting your filters to find matches.

<EmptyState>
  <EmptyStateTitle icon="analysis">No data available</EmptyStateTitle>
  <EmptyStateDescription>
    Try adjusting your filters to find matches.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="primary">Reset Filters</Button>
  </EmptyStateActions>
</EmptyState>

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.

No data available

Try adjusting your filters to find matches.

<EmptyState>
  <EmptyStateTitle icon="analysis">No data available</EmptyStateTitle>
  <EmptyStateDescription>
    Try adjusting your filters to find matches.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="secondary">Create Campaign</Button>
    <Button variant="primary">Reset Filters</Button>
  </EmptyStateActions>
</EmptyState>

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.

No data available

Try adjusting your filters to find matches.

<EmptyState>
  <EmptyStateGraphic>
    <Box style={{ width: 120, height: 120 }} backgroundColor="critical" />
  </EmptyStateGraphic>
  <EmptyStateTitle>No data available</EmptyStateTitle>
  <EmptyStateDescription>
    Try adjusting your filters to find matches.
  </EmptyStateDescription>
</EmptyState>

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.

No data available

Try adjusting your filters to find matches.

<EmptyState>
  <EmptyStateTitle icon="analysis">No data available</EmptyStateTitle>
  <EmptyStateDescription>
    Try adjusting your filters to find matches.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="secondary">Create Campaign</Button>
    <Button variant="primary">Reset Filters</Button>
  </EmptyStateActions>
</EmptyState>

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.

Campaigns

Automate your customer journeys

Engage with your audience through email, in-app, push, and SMS. Our visual workflow builder makes it easy to set up your automated campaigns.

<EmptyState variant="promotion">
  <EmptyStateTitle eyebrow="Campaigns">Automate your customer journeys</EmptyStateTitle>
  <EmptyStateDescription>
    Engage with your audience through email, in-app, push, and SMS. Our visual workflow builder makes it easy to set up your automated campaigns.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="secondary">Learn more</Button>
    <Button variant="primary" icon="chevron-right" iconPosition="trailing">
      Create campaign
    </Button>
  </EmptyStateActions>
  <EmptyStateGraphic>
    <Box style={{ height: '300px', width: '500px' }} backgroundColor="accent" />
  </EmptyStateGraphic>
</EmptyState>

Footer

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

No data available

Try adjusting your filters to find matches.

Learn how to create your first campaign.

<EmptyState>
  <EmptyStateTitle icon="analysis">No data available</EmptyStateTitle>
  <EmptyStateDescription>
    Try adjusting your filters to find matches.
  </EmptyStateDescription>
  <EmptyStateActions>
    <Button variant="secondary">Create Campaign</Button>
    <Button variant="primary">Reset Filters</Button>
  </EmptyStateActions>
  <EmptyStateFooter>
    Learn how to create <Link href="#">your first campaign</Link>.
  </EmptyStateFooter>
</EmptyState>

API

PlumaEmptyState extends Box

PlumaEmptyStateTitle extends Heading

eyebrow  string | undefined

The eyebrow badge displayed above the title. Should be used with the promotion variant.

icon  IconName | null | undefined

The icon to display above the title.

PlumaEmptyStateDescription extends Paragraph

PlumaEmptyStateActions extends Box

PlumaEmptyStateFooter extends Paragraph

PlumaEmptyStateGraphic extends Box

On this page

Importing
Usage
Actions
Custom Graphic
Default Variant
Promotion Variant
Footer
API