Preview Updated 2026-05-10

Toast

Global notifications — imperative API plus a one-mount Toaster, 5 semantics, 6 positions.

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, toast } from '@chufix-design/vue';
</script>

<template>
  <CfButton @click="toast({ title: '操作成功', description: '配置已保存。' })">
    弹一条 Toast
  </CfButton>
</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 }.

背景

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

<template>
  <div class="demo-row">
    <CfButton variant="secondary" @click="toast('默认通知')">默认</CfButton>
    <CfButton variant="primary" @click="toast.success('保存成功')">success</CfButton>
    <CfButton variant="danger" @click="toast.error('保存失败，请稍后重试')">error</CfButton>
    <CfButton variant="tertiary" @click="toast.warning('磁盘空间不足 10%')">warning</CfButton>
    <CfButton variant="ghost" @click="toast.info('已复制到剪贴板')">info</CfButton>
  </div>
</template>

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.

背景

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

type Pos =
  | 'top-right' | 'top-left' | 'top-center'
  | 'bottom-right' | 'bottom-left' | 'bottom-center';

function show(p: Pos) {
  toast({ title: `Toast at ${p}`, description: '本站全局 Toaster 固定 top-right；改 position 需要在你自己的应用里配置。' });
}
</script>

<template>
  <div class="demo-stack">
    <div class="demo-row">
      <CfButton variant="tertiary" @click="show('top-left')">top-left</CfButton>
      <CfButton variant="tertiary" @click="show('top-center')">top-center</CfButton>
      <CfButton variant="tertiary" @click="show('top-right')">top-right</CfButton>
      <CfButton variant="tertiary" @click="show('bottom-left')">bottom-left</CfButton>
      <CfButton variant="tertiary" @click="show('bottom-center')">bottom-center</CfButton>
      <CfButton variant="tertiary" @click="show('bottom-right')">bottom-right</CfButton>
    </div>
    <p class="demo-hint">提示：本站只挂了一个 <code>Toaster</code> 在 <code>top-right</code>，按钮全部都会从这个位置弹出。在你自己的应用里把 <code>&lt;Toaster position="..."/&gt;</code> 改成对应值即可。</p>
  </div>
</template>

<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
}

Method	Equivalent to
`toast(x)`	Default type
`toast.success(x)`	`toast({ ...x, type: 'success' })`
`toast.error(x)`	`toast({ ...x, type: 'error' })`
`toast.warning(x)`	`toast({ ...x, type: 'warning' })`
`toast.info(x)`	`toast({ ...x, type: 'info' })`
`toast.dismiss(id)`	Dismiss a single toast (returns its `id`)
`toast.clear()`	Clear all toasts

`<CfToaster />` Props

Name	Type	Default	Description
`position`	`'top-right' \| 'top-left' \| 'top-center' \| 'bottom-right' \| 'bottom-left' \| 'bottom-center'`	`'top-right'`	Render position

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