Toast

Basic usage

Mount <CfToaster /> once in your root layout, then call toast() from anywhere. Under the hood is a framework-agnostic pub-sub store; the component subscribes and renders the queue. Each toast auto-dismisses after 4s by default.

<script setup lang="ts">
import { CfButton, CfToaster, toast } from '@chufix-design/vue';
</script>

<template>
<CfButton @click="toast({ title: 'Saved', description: 'Configuration has been saved.' })">
  Show a toast
</CfButton>
<CfToaster />
</template>

import { CfButton, CfToaster, toast } from '@chufix-design/react';

export default function Demo() {
return (
  <>
    <CfButton onClick={() => toast({ title: 'Saved', description: 'Configuration has been saved.' })}>
      Show a toast
    </CfButton>
    <CfToaster />
  </>
);
}

Five semantics

toast() renders without an icon by default. success / error / warning / info come with their own colored circular icons. input accepts a string or an object { title, description, duration, dismissible }.

toast('Default notification');
toast.success('Saved');
toast.error('Save failed');
toast.warning('Disk space low');
toast.info('Copied to clipboard');

toast('Default notification');
toast.success('Saved');
toast.error('Save failed');
toast.warning('Disk space low');
toast.info('Copied to clipboard');

Six positions

<CfToaster position="..." /> controls where the stack appears. Common choices are top-right (default); on mobile, bottom-center is recommended.

<CfToaster position="top-right" />
<CfToaster position="bottom-center" />

<CfToaster position="top-right" />
<CfToaster position="bottom-center" />

API

toast(input) and helpers

interface ToastInput {
  type?: 'default' | 'success' | 'error' | 'warning' | 'info';
  title?: string;
  description?: string;
  duration?: number;     // ms, default 4000; <= 0 disables auto-close
  dismissible?: boolean; // show close button, default true
}

<CfToaster /> Props

Mount Toaster only once: place it in the root layout. Mounting it more than once causes duplicate rendering.