Toast Provider

For managing toast notifications globally in your application, use the <CLToastProvider /> component in combination with the useToast composable. This provides a convenient way to show toast notifications from anywhere in your application without managing the toast state manually.

Usage

<!-- Root component -->
<script setup lang="ts">
import '@codeandfunction/callaloo/styles.css';
import { CLThemeProvider, CLToastProvider } from '@codeandfunction/callaloo';
</script>

<template>
  <div class="my-app">
    <CLThemeProvider>
      <CLToastProvider>
        <ChildComponent />
      </CLToastProvider>
    </CLThemeProvider>
  </div>
</template>

<!-- Child component -->
<script setup lang="ts">
import { CLButton, CLColors, CLIconNames, useToast } from '@codeandfunction/callaloo';

const { showToast } = useToast();

const showSuccessToast = () => {
  showToast({
    color: CLColors.Success,
    icon: CLIconNames.CheckCircle,
    title: 'Success',
    message: 'Operation completed successfully!'
  });
};
</script>

<template>
  <CLButton :on-click="showSuccessToast">Show Success Toast</CLButton>
</template>

Props