Toast

잠깐 떴다 사라지는 알림이다. 사용자의 행동을 요구하지 않는다. 결정을 요구한다면 Confirm 을 쓴다.

import { Toast, ToastHost, useToast } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { Toast } from "@nui-kit/react/toast";
import "@nui-kit/react/styles/toast.css";   // 온디맨드일 때

// app/layout.tsx 를 ToastHost 로 감싼 뒤
const toast = useToast();
toast.open({ message: "저장되었습니다." });

기본

toast.open({ message: "저장되었습니다." });

지속시간

toast.open({ message: "저장 실패", tone: "error", duration: 0 });

여러 개 쌓기

토스트는 스택으로 쌓이고 아래에서 위로 정렬된다. closeAll() 로 한 번에 닫을 수 있다.

// ToastHost 를 앱 최상단에 한 번 놓는다
<ToastHost>{children}</ToastHost>

접근성

• tone="default" → role="status" + aria-live="polite" — 읽던 것을 끊지 않는다
• tone="error" → role="alert" + aria-live="assertive" — 즉시 읽힌다
• 토스트 레이어는 pointer-events: none 이라 뒤 화면 조작을 막지 않는다. 카드 자체만 클릭을 받는다

커스터마이징

색은 컴포넌트별로 열지 않는다. 배경만 바꾸면 글자가 따라오지 않아 대비가 깨진다. className 으로 배경과 글자를 함께 지정한다.

Toast 는 border 를 쓰지 않으므로 두께 변수도 없다 — 안 쓰는 변수는 죽은 토큰이 된다.

API

ToastProps 에서 자동 생성됨 (components/Toast/Toast.types.ts).