@usevyre/react@usevyre/vue

Empty State

A consistent placeholder for empty lists, tables, and search results. Pick a variant for a preset icon, settitle/description, and compose the call-to-action as children. Use it for no data — not loading (reach for Skeleton there).

Default, search & error

variant="default" shows a box, "search" a magnifier, "error" a warning (tinted danger). Each takes an optional CTA via children.

No projects yetCreate your first project to get started.

No resultsTry a different search term.

Couldn't load dataSomething went wrong. Please try again.

import { EmptyState, Button } from "@usevyre/react";

<EmptyState
  title="No projects yet"
  description="Create your first project to get started."
>
  <Button variant="primary">New project</Button>
</EmptyState>

<EmptyState
  variant="search"
  size="sm"
  title="No results"
  description="Try a different search term."
>
  <Button variant="secondary">Clear filters</Button>
</EmptyState>

<EmptyState
  variant="error"
  title="Couldn't load data"
  description="Something went wrong. Please try again."
>
  <Button variant="secondary">Retry</Button>
</EmptyState>

<script setup>
import { EmptyState, Button } from "@usevyre/vue";
</script>
<template>
  <EmptyState
    title="No projects yet"
    description="Create your first project to get started."
  >
    <Button variant="primary">New project</Button>
  </EmptyState>

  <EmptyState
    variant="search"
    size="sm"
    title="No results"
    description="Try a different search term."
  >
    <Button variant="secondary">Clear filters</Button>
  </EmptyState>

  <EmptyState
    variant="error"
    title="Couldn't load data"
    description="Something went wrong. Please try again."
  >
    <Button variant="secondary">Retry</Button>
  </EmptyState>
</template>

Props

Prop	Type	Default	Description
`title`	`string`	`—`	Headline (required).
`description`	`string`	`—`	Supporting text under the title.
`variant`	`"default" \| "search" \| "error"`	`"default"`	Preset icon: box / magnifier / warning.
`icon`	`ReactNode`	`—`	Custom icon — overrides the variant preset (Vue: #icon slot).
`size`	`"sm" \| "md" \| "lg"`	`"md"`	sm for inline/in-Card, lg for full-page.
`children`	`ReactNode`	`—`	The call-to-action (a Button, or buttons in a Stack).

AI Context

Valid props

Prop	Values	Default
`variant`	`"default"`\|`"search"`\|`"error"`	`default`
`size`	`"sm"`\|`"md"`\|`"lg"`	`md`

Common AI mistakes

Building an empty placeholder with a bare <div> + centered text→ Use <EmptyState title description variant>
action / cta prop→ Put the Button as children of EmptyState
Using EmptyState for a loading state→ Use <Skeleton> while loading; EmptyState when the result set is empty

Quick examples

Empty search results with a reset CTA

<EmptyState
  variant="search"
  title="No results"
  description="Try a different search term."
>
  <Button variant="secondary" onClick={reset}>Clear filters</Button>
</EmptyState>

Full-page empty list

<EmptyState
  size="lg"
  title="No projects yet"
  description="Create your first project to get started."
>
  <Button variant="primary">New project</Button>
</EmptyState>

← Dropdown Menu Field →