Lenso UI

Foundation component · Feedback

Content State

A composable empty, loading, or error state without imposing application status semantics.

Live playground

No matching results

Try a broader search or clear the current filters.

Composition

  • Compose Visual, Title, Description, and Actions only when each part adds meaning.
  • Use start alignment inside work regions and centered alignment for isolated empty views.
  • Title is neutral by default; render the heading level required by the surrounding page.

Announcements

  • Static empty states need no live region.
  • For dynamic loading or results, your application supplies role, aria-live, and aria-busy.

Implementation

Announcement urgency and recovery actions stay application-owned.

import { ContentState } from "@lenso/ui/content-state";

<ContentState.Root>
  <ContentState.Visual aria-hidden>○</ContentState.Visual>
  <ContentState.Title as="h2">No results</ContentState.Title>
  <ContentState.Description>Try changing the current filters.</ContentState.Description>
  <ContentState.Actions>{clearFiltersButton}</ContentState.Actions>
</ContentState.Root>;
Lenso UI