Empty State

A placeholder component used to communicate that there is no content to display, often with an icon, message, and optional action.

Usage

Fill empty areas with contextual information. It helps users understand why content is missing and what they can do about it.

import { EmptyState, Icon } from "@elemnts-ui/react"

<EmptyState.Root>
  <EmptyState.Content>
    <EmptyState.Indicator>
      <Icon icon="tabler:database" width={32} height={32} />
    </EmptyState.Indicator>
    <EmptyState.Title>No data available</EmptyState.Title>
    <EmptyState.Description>
      There are no records to display at this time.
    </EmptyState.Description>
  </EmptyState.Content>
</EmptyState.Root>

Custom Icon

The EmptyState.Indicator slot accepts any content, allowing you to use different icons for different contexts.

With Action

Use EmptyState.Control to provide users with a call to action, such as a button to create new content or retry a failed operation.

API Reference

EmptyStateRoot

The root container for the empty state.

Prop	Type	Default
asChild	`boolean`	`false`

EmptyStateContent

The content container for the empty state.

Prop	Type	Default
asChild	`boolean`	`false`

EmptyStateIndicator

The indicator for the empty state.

Prop	Type	Default
asChild	`boolean`	`false`

EmptyStateTitle

The title for the empty state.

Prop	Type	Default
asChild	`boolean`	`false`

EmptyStateDescription

The description for the empty state.

Prop	Type	Default
asChild	`boolean`	`false`

EmptyStateControl

Container for actions when the empty state is displayed.

Prop	Type	Default
asChild	`boolean`	`false`