Sonner

Sonner 基于 sonner 封装，用于展示全局轻提示和通知反馈。组件库导出三层能力：Sonner 作为全局 Toaster 容器，message 用于轻量单句反馈，notification 用于带标题、描述和操作按钮的通知，toast 则保留 sonner 原始 API。

import {
  Message,
  Notification,
  Sonner,
  message,
  notification,
  toast
} from '@skyroc/web-ui';

何时使用

• 操作成功、失败、警告或加载状态需要即时反馈。
• 需要不打断用户流程的全局提示。
• 简短单句反馈使用 message；带标题、说明或按钮的反馈使用 notification。
• 需要完全使用 sonner 原始能力时直接使用 toast。

全局容器

在应用根部挂载一次 Sonner，之后即可在任意客户端组件中调用 toast、message 或 notification。playground 已在 locale layout 中全局挂载。

<Sonner />

toast.success('Saved', {
  description: 'Your changes have been saved'
});

Message

message 是轻量提示 API，适合成功、失败、警告、信息和加载等单句反馈。它支持字符串调用、配置对象、Promise 状态和手动关闭。

message.success('Operation successful');
message.error('Operation failed');

const id = message.loading('Loading...');
message.dismiss(id);

Notification

notification 用于更丰富的通知内容，支持标题、描述、关闭按钮和操作按钮。

notification.info({
  title: 'New Message',
  description: 'You have a new message',
  action: {
    label: 'View',
    onClick: () => {}
  }
});

原生 Toast

toast 直接从 sonner re-export，适合需要使用 sonner 原始 API 的场景，例如 toast.promise、自定义 action、description 或更细粒度的 toast 配置。

toast.promise(
  fetchData(),
  {
    loading: 'Loading...',
    success: 'Loaded',
    error: 'Failed'
  }
);

全局配置

message.config 和 notification.config 用于设置默认时长、默认位置和最大展示数量。destroy 是 dismiss 的别名，不传 id 时会清理当前 API 维护的全部实例记录。

message.config({
  duration: 1500,
  maxCount: 2,
  position: 'top-center'
});

notification.config({
  closeButton: true,
  duration: 0,
  maxCount: 2,
  position: 'top-right'
});

API

Sonner

全局 Toaster 容器。基于 sonner 的 Toaster，默认读取 next-themes 当前主题，并合并项目内置 toast 样式。

message

轻量全局消息 API。

notification

富通知 API。

类型