Empty

A centered empty state for missing data, empty search results and error pages.

Installation

npx alixan-ui-nuxt add empty

Usage

No results

Try changing filters or search query.

<template>
  <Empty
    title="No results"
    description="Try changing filters or search query."
    button="Reset filters"
    button-color="secondary"
    @action="resetFilters"
  />
</template>

With Media

Page not found

The page you are looking for does not exist or has been moved.

<template>
  <Empty
    title="Page not found"
    description="The page you are looking for does not exist or has been moved."
    button="Go home"
    button-color="primary"
    @action="navigateTo('/')"
  >
    <div class="flex size-24 items-center justify-center rounded-4xl bg-secondary text-primary">
      <Lottie name="error" :loop="false" width="80px" height="80px" />
    </div>
  </Empty>
</template>

API Reference

Prop	Type	Default	Description
title	string	-	Main empty state heading.
description	string	-	Optional supporting text.
button	string	-	Optional action button label.
buttonColor	'default' \| 'primary' \| 'secondary' \| 'destructive'	'primary'	Optional action button color.

Slots

Prop	Description
default	Optional media rendered above the title.