NxtGenNxtGenDesign v0/Components
Feedback

Toast

우하단에 잠시 떴다 사라지는 일시적 알림.

저장 완료, 에러 발생 등 사용자 흐름을 차단하지 않는 알림. App entry에서 ToastProvider로 감싸고 useToast() hook으로 발사.

import { ToastProvider, useToast } from "@nxtgen-org/react";

Severities

useToast() hook

tsx
const { toast } = useToast();


toast({ variant: "success", title: "저장 완료" });
toast({
  variant: "info",
  title: "에이전트 활성화됨",
  description: "준비 완료.",
  duration: 8000,
});

    Setup

    App entry

    <ToastProvider>
  <App />
</ToastProvider>
    tsx
    // app/layout.tsx
    import { ToastProvider } from "@nxtgen-org/react";
    

    export default function RootLayout({ children }) {
      return (
        <html>
          <body>
            <ToastProvider>{children}</ToastProvider>
          </body>
        </html>

    API

    NameTypeDefaultDescription
    ToastProvider{ duration?: number }—기본 5000ms.
    useToast(){ toast: (item) => void }——
    toast(){ variant, title, description?, duration? }——
    variant"info" | "success" | "warning" | "danger"——