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"가 적용되며, aria-labelledby/aria-describedby로 Toast.Title·Toast.Description를 연결하므로 둘을 함께 포함하세요.

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	자동 해제 시간 (밀리초)