No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

EmptyState

The EmptyState component consists of a message and optionally an image, button, and additional information.

When to use

Use an empty state to communicate to the user that there is no data to display and provide instructions for what to do next. Example use cases:

  • When a user has not created a particular resource yet
  • When a filter or search query returns no results
  • When a user completes all actions, such as clearing their inbox or notifications

There are different variants to handle the most common empty state use cases. These variants provide a specific default message and image.

Usage

variant="call-to-action"

Use when there is no data to display and you want to encourage the user to take an action. Usually either to complete some initial configuration, or to create an item.

import { EmptyState, LinkButton, TextLink } from '@grafana/ui'; <EmptyState variant="call-to-action" message="You haven't created any playlists yet" button={ <LinkButton icon="plus" href="playlists/new" size="lg"> Create playlist </LinkButton> } > You can use playlists to cycle dashboards on TVs without user control.{' '} <TextLink external href="<externalDocsLink>"> Learn more. </TextLink> </EmptyState>;

For scenarios where there is no single button that can be clicked to create the item, you can omit the button prop. Instead, provide additional information to help the user understand how to create the specific resource.

import { EmptyState, TextLink } from '@grafana/ui'; <EmptyState variant="call-to-action" message="You haven't created any library panels yet"> Create a library panel from any existing dashboard panel through the panel context menu.{' '} <TextLink external href="<externalDocsLink>"> Learn more. </TextLink> </EmptyState>;

variant="not-found"

Use in place of content when a search query or filter returns no results.

There are sensible defaults for the image, so in most cases all you need to provide is a message.

import { EmptyState } from '@grafana/ui'; <EmptyState variant="not-found" message="No playlists found" />;

If the empty state is rendered as you are typing in a search box, use the role="alert" prop to announce the empty state to screen readers. Verify that the use case makes sense, as this approach may be very disruptive if used the wrong way.

variant="completed"

For when a user has completed all tasks on a page, such as reading all their notifications.

import { EmptyState } from '@grafana/ui'; <EmptyState variant="completed" message="You're all caught up" />;

Customization

For all variants you can:

  • provide a custom image or hide the image entirely
  • provide a button (e.g. to provide a call to action or clear the search query)
  • provide additional information via React children
import { Button, EmptyState, TextLink } from '@grafana/ui'; <EmptyState variant="not-found" button={<Button variant="secondary" onClick={clearSearchQuery} />} image={<AnyReactNode />} message="No playlists found" variant="not-found" > Optionally provide some additional information here. Maybe even a link to{' '} <TextLink href="<externalDocsLink>" external> documentation. </TextLink> </EmptyState>;

Props

NameDescriptionDefault
button
Provide a button to render below the message
ReactNode
-
hideImage
boolean
false
image
Override the default image for the variant
ReactNode
-
message*
Message to display to the user
string
-
variant*
Which variant to use. Affects the default image shown.
"call-to-action""not-found""completed"
-
role
Use to set alert when needed. See documentation for the use case
AriaRole
-