Status State

Unified loading, empty, error, and no-results state.

Usage

<script setup>
import { ArchStatusState, ArchButton } from "@archora/ui";
</script>

<template>
  <ArchStatusState variant="no-results" title="No matches" description="Try another query.">
    <template #actions><ArchButton variant="secondary">Clear filters</ArchButton></template>
  </ArchStatusState>
</template>

Live sandbox

Status State can be tested directly on this page.

interactive

∅

No matches

Try another query.

<StatusState />

Props

Prop	Type	Default	Description
variant	"loading" | "empty" | "error" | "no-results"	"empty"	Visual variant.
title	string	-	Title.
description	string	-	Description.

Slots

Slot	Props	Description
actions	-	State actions.