Components / Display

EmptyState

A composable presentation layout for empty results and first-use states.

Preview

No archived projects

Projects you archive will appear here.

Install

Run in your project

npx @getweini/cli@latest add empty-state

Use cases

First-use guidance

Explain what a new workspace can do and offer a first action.

No search results

Explain that a query has no matches and suggest a useful recovery path.

Usage example

Vue

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
import EmptyState from './components/ui/empty-state/EmptyState.vue'
import EmptyStateActions from './components/ui/empty-state/EmptyStateActions.vue'
import EmptyStateDescription from './components/ui/empty-state/EmptyStateDescription.vue'
import EmptyStateIcon from './components/ui/empty-state/EmptyStateIcon.vue'
import EmptyStateTitle from './components/ui/empty-state/EmptyStateTitle.vue'
</script>

<template>
  <EmptyState as="section" aria-labelledby="empty-title" aria-describedby="empty-description">
    <EmptyStateIcon><span>□</span></EmptyStateIcon>
    <EmptyStateTitle id="empty-title">No messages</EmptyStateTitle>
    <EmptyStateDescription id="empty-description">Start a conversation with your team.</EmptyStateDescription>
    <EmptyStateActions><Button>Compose</Button></EmptyStateActions>
  </EmptyState>
</template>

More examples

New workspace

Connect the section to its title and description.

New workspace

<script setup lang="ts">
import Button from './components/ui/button/Button.vue'
import EmptyState from './components/ui/empty-state/EmptyState.vue'
import EmptyStateActions from './components/ui/empty-state/EmptyStateActions.vue'
import EmptyStateDescription from './components/ui/empty-state/EmptyStateDescription.vue'
import EmptyStateTitle from './components/ui/empty-state/EmptyStateTitle.vue'
</script>

<template>
  <EmptyState as="section" aria-labelledby="workspace-empty" aria-describedby="workspace-hint">
    <EmptyStateTitle id="workspace-empty">No projects yet</EmptyStateTitle>
    <EmptyStateDescription id="workspace-hint">Create a project to organize your team’s work.</EmptyStateDescription>
    <EmptyStateActions><Button>Create project</Button></EmptyStateActions>
  </EmptyState>
</template>

Search with no matches

An aligned empty state can sit naturally in a results column.

Search with no matches

<script setup lang="ts">
import EmptyState from './components/ui/empty-state/EmptyState.vue'
import EmptyStateDescription from './components/ui/empty-state/EmptyStateDescription.vue'
import EmptyStateTitle from './components/ui/empty-state/EmptyStateTitle.vue'
</script>

<template>
  <EmptyState align="start">
    <EmptyStateTitle>No matching files</EmptyStateTitle>
    <EmptyStateDescription>Try a shorter name or clear your filters.</EmptyStateDescription>
  </EmptyState>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for EmptyState
Name	Type	Default or requirement
`as`	div \| section \| article	div
`align`	start \| center	center
`EmptyStateTitle as`	h2 \| h3 \| h4 \| h5 \| h6	h3
`icon / title / description / actions`	compound children	optional

The component provides presentation only and adds no copy, focus stops, or live-region behavior. The icon region is hidden from assistive technology; associate semantic sections with their title and description.

Implementation notes

Write a title that states what is empty, then explain a useful next step.
Use a real action when recovery is possible; avoid a button that repeats the same failed search.

Accessibility and localization

The icon area is decorative; put meaningful information in title and description text.