EmptyWithMutedBackground() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ EmptyWithMutedBackground() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/empty-example.tsx lines 74–105

function EmptyWithMutedBackground() {
  return (
    <Example title="With Muted Background">
      <Empty className="bg-muted">
        <EmptyHeader>
          <EmptyTitle>No results found</EmptyTitle>
          <EmptyDescription>
            No results found for your search. Try adjusting your search terms.
          </EmptyDescription>
        </EmptyHeader>
        <EmptyContent>
          <Button>Try again</Button>
          <Button
            variant="link"
            render={<a href="#" />}
            className="text-muted-foreground"
            nativeButton={false}
          >
            Learn more{" "}
            <IconPlaceholder
              lucide="ArrowUpRightIcon"
              tabler="IconArrowUpRight"
              hugeicons="ArrowUpRight01Icon"
              phosphor="ArrowUpRightIcon"
              remixicon="RiArrowRightUpLine"
            />
          </Button>
        </EmptyContent>
      </Empty>
    </Example>
  )
}