Placeholder displayed when a view has no content. Covers six scenarios: no data, no connection, error, no notifications, connection lost, and page not found.
Loading demo: empty-state-real-world
npx sdaia-ui@latest add empty-state
import { EmptyState } from "@/components/ui/empty-state"<EmptyState type="no-data" />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 |
Empty state for a view with no available data.
Loading demo: empty-state-no-data
Empty state shown when there is no internet connection.
Loading demo: empty-state-no-connection
Empty state shown when an error occurs.
Loading demo: empty-state-error
Empty state for an empty notification list.
Loading demo: empty-state-no-notifications
Empty state shown when the connection is lost mid-session.
Loading demo: empty-state-connection-lost
404 empty state for pages that cannot be found.
Loading demo: empty-state-page-not-found