Toaststandard

화면 모서리에 잠깐 떴다 사라지는 알림(toast)을 Base UI `Toast` 로 그리는 아이템입니다. shadcn base-nova 의 stock 아이템입니다. `sonner` 라이브러리로 그리는 알림은 `sonner` 아이템입니다. 한 앱에는 둘 중 하나만 씁니다.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/toast

의존 아이템button

Default

Basic

With Action

Promise

toast-example.tsx

"use client"
import {  Example,  ExampleWrapper,} from "@/components/example"import { Button } from "@/components/ui/button"import { toast } from "@/components/ui/toast"
export default function ToastExample() {  return (    <ExampleWrapper>      <ToastBasic />      <ToastWithAction />      <ToastPromise />    </ExampleWrapper>  )}
function ToastBasic() {  return (    <Example title="Basic" className="items-center justify-center">      <Button        variant="outline"        className="w-fit"        onClick={() =>          toast.add({            title: "Event created",            description: "Sunday, December 3 at 9:00 AM",          })        }      >        Show Toast      </Button>    </Example>  )}
function ToastWithAction() {  function showToast() {    const id = toast.add({      title: "Event created",      description: "You can undo this action.",      actionProps: {        children: "Undo",        onClick() {          toast.close(id)          toast.add({            description: "Event creation undone.",          })        },      },    })  }
  return (    <Example title="With Action" className="items-center justify-center">      <Button variant="outline" className="w-fit" onClick={showToast}>        Show Toast      </Button>    </Example>  )}
function ToastPromise() {  function showToast() {    toast.promise(      new Promise<{ name: string }>((resolve) => {        window.setTimeout(() => resolve({ name: "Event" }), 2000)      }),      {        loading: "Creating event…",        success: (data) => `${data.name} created.`,        error: "Could not create event.",      }    )  }
  return (    <Example title="Promise" className="items-center justify-center">      <Button variant="outline" className="w-fit" onClick={showToast}>        Create Event      </Button>    </Example>  )}