Toast
기존 Base UI Toast로 알림 수명과 접근성을 처리합니다. 예제는 성공·오류·실행 취소와 자동 닫힘을 보여주며 서버에 저장하지 않습니다. 알림 본문은 읽기 쉬운 전경색을 유지합니다.
@neumorphism-ui/toast미리보기
초안 사용 가능
설치
설치: toast
npx shadcn@latest add @neumorphism-ui/toastCLI가 npm 의존성, base 토큰, utils와 컴포넌트 소스를 순서대로 확인하고 설치합니다.
Registry를 처음 사용한다면 namespace 설정 을 먼저 완료하세요.
사용법
사용법: 설치
npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/toastImport
Toast import 코드
"use client";
import * as React from "react";
import { Button } from "@/components/ui/button";
import { ToastProvider, Toaster, useToast } from "@/components/ui/toast";Example
Toast 사용 코드
const copy = {
en: { save: "Show success", success: "Changes saved", body: "This is a local demonstration. No server request was made.", fail: "Show error", error: "Could not save", retry: "Your changes are retained. Try again.", archive: "Archive draft", archived: "Draft archived", undo: "Undo", undone: "Archive undone", idle: "Draft available", timed: "Show timed toast", quick: "Quick update", region: "Notifications", close: "Dismiss notification" },
ko: { save: "성공 알림", success: "변경 사항 저장됨", body: "로컬 예제이며 서버 요청은 전송하지 않습니다.", fail: "오류 알림", error: "저장하지 못했습니다", retry: "변경 사항은 유지됩니다. 다시 시도하세요.", archive: "초안 보관", archived: "초안이 보관되었습니다", undo: "실행 취소", undone: "보관을 취소했습니다", idle: "초안 사용 가능", timed: "자동 닫힘 알림", quick: "업데이트 알림", region: "알림", close: "알림 닫기" },
ja: { save: "成功通知", success: "変更を保存しました", body: "ローカル例です。サーバーへの送信は行いません。", fail: "エラー通知", error: "保存できませんでした", retry: "変更は保持されています。再試行してください。", archive: "下書きを保管", archived: "下書きを保管しました", undo: "元に戻す", undone: "保管を取り消しました", idle: "下書き利用可能", timed: "自動で閉じる通知", quick: "更新通知", region: "通知", close: "通知を閉じる" },
zh: { save: "成功通知", success: "更改已保存", body: "这是本地示例,未发送服务器请求。", fail: "错误通知", error: "保存失败", retry: "更改仍然保留,请重试。", archive: "归档草稿", archived: "草稿已归档", undo: "撤销", undone: "已撤销归档", idle: "草稿可用", timed: "自动关闭通知", quick: "更新通知", region: "通知", close: "关闭通知" },
};
function ToastActions({ locale }: { locale: keyof typeof copy }) {
const text = copy[locale];
const manager = useToast();
const [status, setStatus] = React.useState<string>(text.idle);
return <div className="grid gap-4"><div className="flex flex-wrap gap-3">
<Button onClick={() => manager.add({ title: text.success, description: text.body, type: "success" })}>{text.save}</Button>
<Button onClick={() => manager.add({ title: text.error, description: text.retry, type: "error" })}>{text.fail}</Button>
<Button onClick={() => { setStatus(text.archived); const id = manager.add({ title: text.archived, description: text.body, actionProps: { children: text.undo, onClick: () => { setStatus(text.undone); manager.close(id); } } }); }}>{text.archive}</Button>
<Button onClick={() => manager.add({ title: text.quick, timeout: 1200 })}>{text.timed}</Button>
</div><p role="status" className="text-sm text-[var(--muted-foreground)]">{status}</p></div>;
}
export default function ToastExample({ locale = "ko" }: { locale?: keyof typeof copy }) {
// Keep examples available for inspection; the timed example overrides this.
return <ToastProvider timeout={0}><ToastActions locale={locale} /><Toaster label={copy[locale].region} closeLabel={copy[locale].close} /></ToastProvider>;
}API 레퍼런스
| 컴포넌트 | 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|---|
ToastProvider | timeout / limit / toastManager | number / ToastManager | — | 표시 시간, 최대 표시 개수와 선택적 외부 매니저입니다. timeout 0은 자동 닫힘을 끕니다. |
useToast | add / close / update / promise | Base UI toast manager methods | — | 알림 생성·닫기·갱신·비동기 상태를 제어합니다. |
Toaster | label / closeLabel | string | — | 알림 영역과 닫기 버튼의 접근성 문구입니다. |
접근성
- 01
F6로 알림 영역에 접근할 수 있습니다. 색상만이 아닌 제목과 설명으로 결과를 전달하세요.
- 02
중요한 복구 동작은 알림에만 두지 말고 화면에도 제공하세요. 예제는 검토를 위해 수동 닫힘을 기본으로 사용합니다.