Toast

import { Button, ToastProvider, useToast } from '@byteion/react/client';

// 1. Wrap your app once at the root:
export function App() {
  return (
    <ToastProvider placement="bottom-right">
      <ToastDemo />
    </ToastProvider>
  );
}

// 2. Trigger toasts anywhere inside the tree:
function ToastDemo() {
  const toast = useToast();
  return (
    <div className="flex flex-wrap gap-3 p-6">
      <Button onClick={() => toast.show({ tone: 'success', title: 'Saved',
        message: 'Your changes are live.', duration: 3000 })}>Success</Button>
      <Button variant="outline" onClick={() => toast.show({ tone: 'info',
        title: 'Heads up', message: 'A new version is available.' })}>Info</Button>
      <Button variant="outline" tone="warning" onClick={() => toast.show({
        tone: 'warning', title: 'API limit',
        message: "You've used 86% of quota." })}>Warning</Button>
      <Button tone="danger" onClick={() => toast.show({ tone: 'danger',
        title: 'Failed to save', message: 'Network error — please retry.' })}>Danger</Button>
    </div>
  );
}

<!-- 1. Mount the container once at your root (App.vue) -->
<script setup lang="ts">
import { Button, ToastContainer, useToast } from '@byteion/vue';

const toast = useToast();

function showSuccess() {
  toast.show({ tone: 'success', title: 'Saved',
    message: 'Your changes are live.', duration: 3000 });
}
function showInfo() {
  toast.show({ tone: 'info', title: 'Heads up',
    message: 'A new version is available.' });
}
function showWarning() {
  toast.show({ tone: 'warning', title: 'API limit',
    message: "You've used 86% of quota." });
}
function showDanger() {
  toast.show({ tone: 'danger', title: 'Failed to save',
    message: 'Network error — please retry.' });
}
</script>

<template>
  <!-- Mount once at the application root: -->
  <ToastContainer placement="bottom-right" />

  <!-- Trigger from anywhere in the tree: -->
  <div class="flex flex-wrap gap-3 p-6">
    <Button @click="showSuccess">Success</Button>
    <Button variant="outline" @click="showInfo">Info</Button>
    <Button variant="outline" tone="warning" @click="showWarning">Warning</Button>
    <Button tone="danger" @click="showDanger">Danger</Button>
  </div>
</template>