EmptyWithIcon() — ui Function Reference

Architecture documentation for the EmptyWithIcon() function in empty-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ EmptyWithIcon() — ui Function Reference

Dependency Diagram

graph TD
  559fdf29_c74c_c055_4d05_e91f8e79af16["EmptyWithIcon()"]
  cd9b19bf_ceb7_05d0_c420_23f4b40e8464["empty-example.tsx"]
  559fdf29_c74c_c055_4d05_e91f8e79af16 -->|defined in| cd9b19bf_ceb7_05d0_c420_23f4b40e8464
  style 559fdf29_c74c_c055_4d05_e91f8e79af16 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/empty-example.tsx lines 143–179

function EmptyWithIcon() {
  return (
    <Example title="With Icon">
      <Empty className="border">
        <EmptyHeader>
          <EmptyMedia variant="icon">
            <IconPlaceholder
              lucide="FolderIcon"
              tabler="IconFolder"
              hugeicons="Folder01Icon"
              phosphor="FolderIcon"
              remixicon="RiFolderLine"
            />
          </EmptyMedia>
          <EmptyTitle>Nothing to see here</EmptyTitle>
          <EmptyDescription>
            No posts have been created yet. Get started by{" "}
            <a href="#">creating your first post</a>.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button variant="outline">
            <IconPlaceholder
              lucide="PlusIcon"
              tabler="IconPlus"
              hugeicons="PlusSignIcon"
              phosphor="PlusIcon"
              remixicon="RiAddLine"
              data-icon="inline-start"
            />
            New Post
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  )
}