Empty State

!npm (scoped)

#### View on MongoDB.design

Installation

$3

``shell
pnpm add @leafygreen-ui/empty-state
`

$3

`shell
yarn add @leafygreen-ui/empty-state
`

$3

`shell
npm install @leafygreen-ui/empty-state
`

Example

Output HTML

Properties

#### BasicEmptyState

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

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

`

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';

title="Explore Your Data"
features={[
{ graphic: , title: "Feature 1", description: "Description of feature 1" },
{ graphic: , title: "Feature 2", description: "Description of feature 2" },
{ graphic: , title: "Feature 3", description: "Description of feature 3" },
]}
primaryButton={

}
secondaryButton={}
externalLink={}
/>

`

| Prop | Type | Description | Default |
| ----------------- | ---------------- | ----------------------------------------------------------------------------------------------- | ----------- |
| title\* | string | Heading text. | |
| features\* | Array | 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. |