Data Display

Empty

Empty-state placeholder.

Import

tsx

import { Empty } from "@cooud-ui/ui";

bash

npx cooud-ui add empty

Examples

Empty state

A composable empty-state for zero-data views, with an icon, copy, and an action.

No messages yet

When someone sends you a message, it will show up here. Start a conversation to get going.

tsx

<Empty>
  <EmptyIcon>
    <Inbox aria-hidden="true" />
  </EmptyIcon>
  <EmptyTitle>No messages yet</EmptyTitle>
  <EmptyDescription>
    When someone sends you a message, it will show up here. Start a conversation to get going.
  </EmptyDescription>
  <EmptyContent>
    <Button>New message</Button>
  </EmptyContent>
</Empty>