Empty State
Placeholder displayed when a view has no content. Covers six scenarios: no data, no connection, error, no notifications, connection lost, and page not found.
'use client'; import { EmptyState } from 'sdaia-ui'; export default function EmptyStateRealWorld() {Installation
npx sdaia-ui@latest add empty-state
Usage
import { EmptyState } from "@/components/ui/empty-state"<EmptyState type="no-data" />Examples
No Data
Empty state for a view with no available data.
<EmptyState type="no-data" />No Connection
Empty state shown when there is no internet connection.
<EmptyState type="no-connection" />Error
Empty state shown when an error occurs.
<EmptyState type="error" />No Notifications
Empty state for an empty notification list.
<EmptyState type="no-notifications" />Connection Lost
Empty state shown when the connection is lost mid-session.
<EmptyState type="connection-lost" />Page Not Found
404 empty state for pages that cannot be found.
<EmptyState type="page-not-found" />API Reference
EmptyStateProps
Props for the EmptyState component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'no-data' | 'no-connection' | 'error' | 'no-notifications' | 'connection-lost... | 'no-data' | optional |
rtl | boolean | false | optional |
illustration | ReactNode | - | optional |
heading | boolean | true | optional |
helperText | boolean | true | optional |
button | boolean | true | optional |
headingContent | ReactNode | - | optional |
helperTextContent | ReactNode | - | optional |
buttonLabel | string | - | optional |
onButtonClick | () => void | - | optional |