For managing toast notifications globally in your application, use the CLToastProvider.

Usage

Default

Use the title and message props to set the content of the toast notification.

<script setup lang="ts">
import { ref } from 'vue';
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLToast from '@codeandfunction/callaloo/CLToast';

const showToast = ref(false);

const handleDismiss = () => {
  showToast.value = false;
};

const showToastHandler = () => {
  showToast.value = true;
};
</script>

<template>
  <CLButton :on-click="showToastHandler">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    title="Notification"
    message="This is a toast notification."
    :on-dismiss="handleDismiss" />
</template>

Colors

Use the color prop to customize the component's color.

Variants

Use the variant prop to customize the component's appearance.

With Icon

Use the icon prop to display an icon in the toast notification.

<script setup lang="ts">
import { ref } from 'vue';
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLToast from '@codeandfunction/callaloo/CLToast';
import { CLColors, CLIconNames } from '@codeandfunction/callaloo';

const showToast = ref(false);
const toastIcon = ref(CLIconNames.CheckCircle);
const toastColor = ref(CLColors.Success);

const handleDismiss = () => {
  showToast.value = false;
};
</script>

<template>
  <CLButton :on-click="() => { showToast = true; }">Show Success Toast</CLButton>
  <CLToast
    v-if="showToast"
    :color="toastColor"
    :icon="toastIcon"
    title="Success"
    message="Operation completed successfully!"
    :on-dismiss="handleDismiss" />
</template>

With Action

Use the action-label and on-action props to add an action button to the toast.

<script setup lang="ts">
import { ref } from 'vue';
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLToast from '@codeandfunction/callaloo/CLToast';
import { CLColors } from '@codeandfunction/callaloo';

const showToast = ref(false);

const handleDismiss = () => {
  showToast.value = false;
};

const handleAction = () => {
  alert('Action clicked!');
};
</script>

<template>
  <CLButton :on-click="() => { showToast = true; }">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    :color="CLColors.Primary"
    title="New message"
    message="You have a new message."
    action-label="View"
    :on-action="handleAction"
    :on-dismiss="handleDismiss" />
</template>

Auto Dismiss

Use the dismiss-timer prop to automatically dismiss the toast after a specified number of seconds. Set to 0 to disable auto-dismiss.

<script setup lang="ts">
import { ref } from 'vue';
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLToast from '@codeandfunction/callaloo/CLToast';

const showToast = ref(false);

const handleDismiss = () => {
  showToast.value = false;
};
</script>

<template>
  <CLButton :on-click="() => { showToast = true; }">Show Toast</CLButton>
  <CLToast
    v-if="showToast"
    :dismiss-timer="5"
    title="Auto-dismiss"
    message="This toast will automatically dismiss in 5 seconds."
    :on-dismiss="handleDismiss" />
</template>

Border Radius

Use the border-radius prop to customize the border radius of the toast.

Props