Skip to content
Paramanu v0.1.0-alpha.0

Empty State

Empty State displays a centered placeholder when a list or view has no content, with optional icon, heading, description, and action buttons.

Basic Usage

No items found

Get started by creating your first item.

import { Empty, EmptyHeading, EmptyDescription, EmptyActions } from "@paramanu/data-display-react"


export default function App() {
return (
  <Empty>
    <EmptyHeading>No items found</EmptyHeading>
    <EmptyDescription>Get started by creating your first item.</EmptyDescription>
    <EmptyActions><button>Create Item</button></EmptyActions>
  </Empty>
)
}
<div class="pm-empty pm-empty--md">
<h3 class="pm-empty__heading">No items found</h3>
<p class="pm-empty__description">Get started by creating your first item.</p>
<div class="pm-empty__actions"><button type="button">Create Item</button></div>
</div>