Feedback Components

import { Alert, EmptyState, ErrorDisplay, Loading, Skeleton, ToastProvider, ToastMessage, useToast } from '@artisanpack-ui/vue/feedback';

<Alert color="success" dismissible>Operation completed successfully.</Alert>
<Alert color="error">Something went wrong.</Alert>

<EmptyState heading="No results" description="Try adjusting your search filters.">
  <template #action><Button>Reset Filters</Button></template>
</EmptyState>

<ErrorDisplay title="Failed to load data" message="Please check your connection." retryable @retry="fetchData" />

<Loading color="primary" size="lg" variant="dots" />

<Skeleton width="200px" height="1rem" />
<Skeleton circle width="48px" height="48px" />

<!-- App.vue -->
<script setup>
import { ToastProvider } from '@artisanpack-ui/vue/feedback';
</script>

<template>
  <ToastProvider :default-duration="5000" :max="5">
    <RouterView />
  </ToastProvider>
</template>

<script setup>
import { useToast } from '@artisanpack-ui/vue/feedback';

const toast = useToast();

function save() {
  toast.success('Changes saved!');
}

function handleError() {
  toast.error('Something went wrong.', 8000);
}
</script>