Toast

명령형 토스트 알림 시스템. Toaster 컨테이너를 한 번 배치한 후, 어디서든 toast()를 호출하여 자동 해제 및 큐 관리가 포함된 알림을 표시합니다.

데모

성공 알림정보 알림

Show Code

API 레퍼런스

Toaster

Prop	Type	Default	Description
placement	"top-left" | "top-right" | "bottom-left" | "bottom-right"	"bottom-left"	화면에서 토스트 컨테이너의 위치
animation	ToastAnimation | false	-	토스트 열기/닫기 애니메이션 설정. false로 비활성화 가능
...props	ComponentPropsWithRef<"section">	-	모든 네이티브 section 요소 속성

Toast

Prop	Type	Default	Description
...props	ComponentPropsWithRef<"div">	-	모든 네이티브 div 요소 속성. role="status" 및 aria-live="polite"가 자동 적용

Toast.Title

Prop	Type	Default	Description
...props	ComponentPropsWithRef<"div">	-	모든 네이티브 div 요소 속성. aria-labelledby를 통해 부모 Toast에 연결

Toast.Description

Prop	Type	Default	Description
...props	ComponentPropsWithRef<"div">	-	모든 네이티브 div 요소 속성. aria-describedby를 통해 부모 Toast에 연결

toast(content, options?)

Prop	Type	Default	Description
content	ReactNode	-	표시할 토스트 콘텐츠 (ReactNode)
options.timeout	number	3000	자동 해제 시간 (밀리초)