Empty State

Empty states provide context and guidance when there's no content to display.

Installation

npm install @libretexts/davis-react

Basic Usage

import { EmptyState, Button } from '@libretexts/davis-react';

export default function Example() {
  return (
    <EmptyState
      title="No results found"
      description="Try adjusting your search or filters"
    >
      <Button>Clear Filters</Button>
    </EmptyState>
  );
}

When to use

• Empty State — Use when a list, table, or container has no data to display. Provides context and a call-to-action to help users get started (e.g., "No records found. Add your first item.").
• Alert — Use to communicate an error, warning, or informational message about the page state. Alert is not specific to empty data — it addresses conditions like failed requests or permission issues.