Toast

작업 흐름을 막지 않으면서 실행 결과를 일시적으로 알려 줄 때 사용합니다.

미리보기

결과 알림과 실행 취소

로컬 성공·오류 알림, 보관 후 실행 취소, 자동으로 닫히는 알림을 비교합니다.

초안 사용 가능

미리보기를 불러오는 중입니다.

설치

Registry를 처음 사용한다면 기본 설정과 공통 스타일 설치 을 먼저 완료하세요.

npx shadcn@latest add @neumorphism-ui/toast

공통 base를 한 번 설치한 뒤 CLI로 필요한 컴포넌트와 의존성을 추가합니다.

결과 알림과 실행 취소

npx shadcn@latest add @neumorphism-ui/button @neumorphism-ui/toast

Registry JSON

사용법

ToastProvider와 Toaster를 배치하고 하위 컴포넌트의 useToast로 알림을 추가하세요. 읽을 수 있는 제목과 메시지에 맞는 표시 시간, 실행 취소 동작을 정합니다.

"use client";

import { Button } from "@/components/ui/button";
import { Toaster, ToastProvider, useToast } from "@/components/ui/toast";

function NotifyButton() {
  const toast = useToast();
  return <Button onClick={() => toast.add({ title: "Changes saved", type: "success" })}>Show notification</Button>;
}

export default function Example() {
  return <ToastProvider><NotifyButton /><Toaster /></ToastProvider>;
}

API 레퍼런스

기존 Base UI Toast로 알림 수명과 접근성을 처리합니다. 예제는 성공·오류·실행 취소와 자동 닫힘을 보여주며 서버에 저장하지 않습니다. 알림 본문은 읽기 쉬운 전경색을 유지합니다.

컴포넌트	속성	타입	기본값	설명
`ToastProvider`	`timeout / limit / toastManager`	`number / ToastManager`	`—`	표시 시간, 최대 표시 개수와 선택적 외부 매니저입니다. timeout 0은 자동 닫힘을 끕니다.
`useToast`	`add / close / update / promise`	`Base UI toast manager methods`	`—`	알림 생성·닫기·갱신·비동기 상태를 제어합니다.
`Toaster`	`label / closeLabel`	`string`	`—`	알림 영역과 닫기 버튼의 접근성 문구입니다.