Empty State

<script setup lang="ts">
import MtEmptyState from "@shopware-ag/meteor-component-library/MtEmptyState";
</script>

<template>
  <mt-empty-state
    icon="solid-chart-line-arrow"
    headline="Default Headline"
    description="Default Description"
  />
</template>

Usage

Empty State is a placeholder surface for a list, page section, or feature that has no content to show yet. Use it when users need context about why the area is empty and what they can do next, such as first-time setup, filtered no-results moments, or empty collections.

import { MtEmptyState } from "@shopware-ag/meteor-component-library";

Examples

With action

Add a link and a button so users can recover from the empty state.

<script setup lang="ts">
import MtEmptyState from "@shopware-ag/meteor-component-library/MtEmptyState";
</script>

<template>
  <mt-empty-state
    icon="solid-chart-line-arrow"
    headline="Extended Headline"
    description="Extended Description"
    link-href="https://storybook.js.org"
    link-text="Learn more"
    button-text="Button text"
  />
</template>

API reference

Props

Events

Slots

Best practices

Behavior

• Empty State combines an icon, headline, description, and optional recovery action in one surface.
• A text link and a button can be shown when users should navigate or create something from the empty state.
• The button slot can replace the default action button when a custom button is needed.

Accessibility

• Keep the headline and description clear enough to explain the empty situation without relying on the icon.
• Use action text that describes the next step clearly, especially when the state blocks progress.
• Make sure linked or button-based recovery actions are keyboard reachable and specific.