Empty

Use the Empty component to display a empty state.

Usage

Source

<RzEmpty>
  <EmptyHeader>
    <EmptyMedia Variant="EmptyMediaVariant.Icon">
      <Blazicon Svg="Lucide.Folder" />
    </EmptyMedia>
    <EmptyTitle>No data</EmptyTitle>
    <EmptyDescription>No data found</EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <RzButton>Add data</RzButton>
  </EmptyContent>
</RzEmpty>

Examples

Outline

Use the border utility class to create a outline empty state.

Background

Use the bg-* and bg-gradient-* utilities to add a background to the empty state.

Avatar

Use the EmptyMedia component to display an avatar in the empty state.

Avatar Group

Use the EmptyMedia component to display an avatar group in the empty state.

Component Parameters

The following tables summarize the parameters for each component in the Empty State suite.

RzEmpty

Property	Type	Default	Description
`ChildContent`	`RenderFragment`	`null`	The content of the empty state, typically including `EmptyHeader` and `EmptyContent`.
`AriaLabel`	`string?`	Localized "Empty state"	Accessible label for the empty state container.

EmptyMedia

Property	Type	Default	Description
`ChildContent`	`RenderFragment`	`null`	The media content, such as an icon or image.
`Variant`	`EmptyMediaVariant`	`Default`	The visual variant of the media container.

EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent

These components primarily accept ChildContent and pass through any additional attributes. They have no unique parameters beyond standard HTML attributes.