EmptyState
Empty states communicate that there is no content to display and optionally suggest an action.
Import
import { EmptyState } from "@gumtree/ui/EmptyState" ; Props
| Prop | Type | Default | Description |
|---|---|---|---|
title* | string | - | Heading text |
description | string | - | Supporting description text |
icon | ComponentChildren | - | Icon displayed above the title |
action | ComponentChildren | - | Action element (e.g. a button) |
Examples
With Icon and Action
A typical empty state with an icon, description, and call-to-action button.
No repositories yet
Create your first repository to get started.
< EmptyState
icon = { < Icon name = "book-open" size = { 48 } /> }
title = "No repositories yet"
description = "Create your first repository to get started."
action = { < Button variant = "primary" > New Repository </ Button > }
/> Minimal
A simple empty state with just a title.
No open issues
< EmptyState
icon = { < Icon name = "circle-dashed" size = { 48 } /> }
title = "No open issues"
/>