Placeholder

Placeholder is a client component ("use client") that renders a Text as a centred flex column, with an optional Icon block above its children. Use it for empty states, such as an empty list or a page without access.

Import#

import { Placeholder } from "@reactberry/system/blocks";

Usage#

import { Placeholder } from "@reactberry/system/blocks";
import { Button, Text } from "@reactberry/system/elements";

export default function EmptyFiles() {
  return (
    <Placeholder icon="Icon24Folder" skin="surface" shape="rounded" minHeight="16rem">
      <Text fontWeight="600" color="primary">
        No files yet
      </Text>
      <Button variant="primary" $size="small">
        Upload a file
      </Button>
    </Placeholder>
  );
}

Examples#

Icon styling#

Without icon, the "IconDocFolder" icon is shown. Pass another registered name, and use iconProps to change its colour or size.

Icon component#

Pass a component from @reactberry/system/icons instead of a name.

Text only#

Set icon={null} to render only the children.

API#

Placeholder#

All other props are spread onto the Text after these defaults: as="div", display="flex", flexDirection="column", justifyContent="center", alignItems="center", fontSize="small", p="medium", gap="s", color="tertiary".

Accessibility#

• The root is a plain div with no role. Add role="status" if the empty state appears in response to a user action, such as filtering.
• The icon is rendered without an accessible name or aria-hidden.

Notes#

• With no icon prop, the registered "IconDocFolder" icon is rendered. String names must be registered (see the Icon page); unknown names log a warning from Icon and render no icon.
• A component passed as icon receives the same defaults and iconProps as the string form, but is rendered directly rather than looked up by name.
• Skeleton uses Placeholder internally for its loading blocks.