@leafygreen-ui/empty-state NPM

Empty State

npm (scoped)

View on MongoDB.design

Installation

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.