EmptyState

Placeholder when a list, table, or view has no data.

Introduction

EmptyState is a placeholder for lists, tables, and views with no data. Pair a title with optional description, media, and actions so the user knows what is missing and what to do next.

When to use: Empty collections, zero search results, and first-run screens. Prefer Skeleton while data is still loading, and Alert for errors or status that is not about missing items.

Compared to similar components:

• Skeleton — Placeholder shapes that preserve layout while content loads. Use Skeleton during fetch; use EmptyState when the result is empty.
• Alert — Inline banner for success, warning, or error. Use Alert for messages about something that happened; use EmptyState when a collection has nothing to show.
• DataTable — Renders EmptyState at the table size when there are no rows. Override it with slots.empty (React) or #empty (Vue).

Use the framework selector in the site header to switch between React and Vue.

Import

import { EmptyState } from "@bridge-ui/vue/Components/EmptyState";

import { EmptyState } from "@bridge-ui/react/Components/EmptyState";

Basic usage

Provide a title and optional description. Use icon for default media, and the action slot for one or more buttons.

Sizes

Control spacing and typography with size. Available values: sm, md (default), and lg.

Alignment

Use align to position the stack. Available values: start, center (default), and end. End alignment flips in RTL.

Heading level

Use titleAs when the page outline needs a heading. The default is p so the block is safe inside tables and lists.

<EmptyState title-as="h2" title="No projects yet" />

<EmptyState titleAs="h2" title="No projects yet" />

Media

Replace the default icon with custom markup through slots.media (React) or #media (Vue). Put multiple buttons in the action slot — the actions row already lays them out.

DataTable

DataTable renders EmptyState at the table size with the semantic inbox icon and the i18n title "No data". Override it with a richer EmptyState via slots.empty (React) or #empty (Vue).

Customization

Fine-tune appearance with className (React) or class (Vue), and the classes prop to target root, media, title, description, actions, and icon.

Accessibility

EmptyState does not set role by default. Pass role="status" when the empty state is a live update after a filter or fetch.

• Keep default media decorative (mediaDecorative defaults to true). Set it to false when the illustration conveys meaning that is not in the title or description.
• Use titleAs with a heading level when the empty state is the main content of the view.
• If the action slot contains buttons or links, they remain in the tab order as native controls.
• Do not rely on the illustration alone — include the situation in the title or description.

Use customProps (React) or custom-props (Vue) to forward attributes to internal parts without affecting the root element.

Anatomy

EmptyState renders a root <div> with optional media, a title element (default p), description, and an actions row:

<div class="empty-state-root">
  <div class="empty-state-media">
    <svg><!-- icon --></svg>
  </div>
  <p class="empty-state-title">Title</p>
  <div class="empty-state-description">Description</div>
  <div class="empty-state-actions"><!-- action slot --></div>
</div>

Related components

Alert, Card, DataTable, Icon, List, Skeleton, Table

API