EmptyState
Empty state component for displaying placeholder content when no data is available.
Empty state component for displaying placeholder content when no data is available.
import { EmptyState } from "@tetherto/mdk-react-devkit";| Prop | Status | Type | Default | Description |
|---|---|---|---|---|
description | Required | React.ReactNode | — | Description text or ReactNode displayed below the image |
image | Optional | EmptyStateImage | "default" | Image to display. Use "default" for the standard illustration, "simple" for a minimal icon, or pass a custom ReactNode. |
size | Optional | ComponentSize | undefined | "md" | Size variant controlling spacing and icon dimensions |
className | Optional | string | undefined | — | Additional CSS class name |
Usage
Placeholder shown when a list, table or panel has no data to display.
Notes
- Use inside the body of tables and cards, not as the root of a page.
- Pass a custom
image(e.g. a brand illustration) to replace the icon.
Example
/** * Runnable example for EmptyState. */import { EmptyState } from '@tetherto/mdk-react-devkit'export const EmptyStateExample = () => ( <div className="mdk-example-grid-3"> <EmptyState description="No miners found" size="sm" /> <EmptyState description="No alerts in the selected range" image="simple" /> <EmptyState description="No data — try a different filter." size="lg" /> </div>)