EmptyState
Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.
A centered placeholder for when there is no data to display.
Import
import { EmptyState } from "~lib/feedback/empty-state";
Props
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
title | string | Yes | N/A | Primary message |
description | string | No | N/A | Secondary description |
icon | ReactNode | No | N/A | Icon or symbol above title |
Examples
Simple
With Description
With Icon
Long Words
A message passed on from an API often has a long web address in it. The title and description break inside a word when they have to, so the text stays inside even a narrow box.