Skip to main content
161

Search Lumen

Find components, APIs, guides, and recipes.

GitHub
React Native docs
FeedbackReact Native

Empty state

Explain missing content with supporting copy, an optional graphic, and a recovery action.

Public APILumenEmptyStateReact Native

Native example

Use Empty state

Explain why the state is empty and offer one useful next action when recovery is possible. Do not use for loading or error states.

View verified React Native runtime capture
Empty state rendered in the Expo web renderer Lumen playground
Verified runtime captureExpo web renderer
tsx
<LumenEmptyState
  title="No saved workspaces"
  description="Create a workspace to get started."
  actions={<LumenButton onPress={createWorkspace}>Create</LumenButton>}
/>

Reference

Public API

The primary shared and platform-specific options exposed by LumenEmptyState.

APIValues or typeDefaultDescription
titlestringRequiredNames the empty state.
graphicReactNodeundefinedProvides an optional platform-native supporting graphic.
descriptionstringundefinedExplains the state or next step.
actionsReactNodeundefinedProvides optional recovery actions.

Native behavior

Design and accessibility

When to use it

Explain why the state is empty and offer one useful next action when recovery is possible. Do not use for loading or error states.

Accessibility

The title, description, optional graphic, and recovery actions remain in a readable native order.

Shared component

Available on other platforms

Apple / SwiftUIAndroid / Compose
React Native docsNative primitives