Empty State

View on MongoDB.design

Installation

PNPM

pnpm add @leafygreen-ui/empty-state

Yarn

yarn add @leafygreen-ui/empty-state

NPM

npm install @leafygreen-ui/empty-state

Example

Output HTML

Properties

BasicEmptyState

import { BasicEmptyState } from '@leafygreen-ui/empty-state';

<BasicEmptyState
  title="No Results Found"
  description="Try adjusting your filters or search terms"
  graphic={<SvgOrImgComponent />}
  badgeProps={{ variant: 'blue', children: 'Optional' }}
  primaryButton={<Button />}
  secondaryButton={<Button />}
  externalLink={<Link />}
/>

A basic empty state component to be used with MongoDB marketing-approved graphics.

| Prop | Type | Description | Default | | ----------------- | -------------- | ------------------------------------------------------------------------------------------------------------------ | ----------- | | graphic | ReactElement | Graphic shown left of text content. The component is designed to be used with MongoDB marketing-approved graphics. | undefined | | badgeProps | BadgeProps | Optional props to conditionally render a badge. | undefined | | title* | string | Heading text. | | | description* | ReactChild | Secondary text. | | | primaryButton | ReactElement | Optional primary call-to-action button. | undefined | | secondaryButton | ReactElement | Optional secondary call-to-action button. This should only exist when a primaryButton exists. | undefined |

FeaturesEmptyState

A component to highlight a set of features in an empty state.

import { FeaturesEmptyState } from '@leafygreen-ui/empty-state';

<FeaturesEmptyState
  title="Explore Your Data"
  features={[
    { graphic: <YourIcon1 />, title: "Feature 1", description: "Description of feature 1" },
    { graphic: <YourIcon2 />, title: "Feature 2", description: "Description of feature 2" },
    { graphic: <YourIcon3 />, title: "Feature 3", description: "Description of feature 3" },
  ]}
  primaryButton={<Button />}
  secondaryButton={<Button />}
  externalLink={<Link />}
/>

| Prop | Type | Description | Default | | ----------------- | ---------------- | ----------------------------------------------------------------------------------------------- | ----------- | | title* | string | Heading text. | | | features* | Array<Feature> | Array of feature objects (length should be 2 or 3 elements). | | | primaryButton | ReactElement | Optional primary call-to-action button. | undefined | | secondaryButton | ReactElement | Optional secondary call-to-action button. This should only exist when a primaryButton exists. | undefined | | externalLink | ReactElement | Optional link to external page for additional information. | undefined |

Note: The features prop must contain an array of feature objects, where each object should have the icon, title, and description properties.

Feature

| Property | Type | Description | | ------------- | -------------- | ---------------------------------------- | | graphic | ReactElement | Icon element to display for the feature. | | title | string | Title of the feature. | | description | ReactChild | Description of the feature. |