EmptyWithIcon() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ EmptyWithIcon() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/empty-example.tsx lines 137–173

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>
  )
}