Toast

잠깐 보이는 결과 알림과 되돌리기.

개요

미리보기

예시 언어동작 줄이기

연결을 끊었어요. 보관본은 남아 있어요.

message

description

tone

undo

undoLabel

progress

이렇게 방금 한 행동의 결과를 한 문장으로 말한다(“연결을 끊었어요”). 되돌리기가 있으면 8초 이상 보이고 호버나 초점 중에는 멈춘다.
이렇게 파괴적이지만 되돌릴 수 있는 결과(보관·연결 해제)는 Toast 되돌리기로 끝낸다. 완전 삭제는 ConfirmDialog를 먼저 연다.
이렇게 하지 않기 행동이 필요한 오류나 꼭 읽어야 할 내용을 Toast에 두지 않는다(Alert). 축하·성공 표현을 쓰지 않는다. 한 번에 2개 넘게 보이지 않는다.

이름	타입	기본값	설명
`message`	`ReactNode`	`연결을 끊었어요. 보관본은 남아 있어요.`	방금 한 행동의 결과 한 문장.
`description?`	`ReactNode`		둘째 줄(무엇이 남았는지). 선택.
`tone?`	`'info' \| 'error'`	`info`	info는 polite, error는 assertive이고 저절로 닫히지 않는다. success는 없다(info로 합침).
`undo?`	`boolean`	`false`	“되돌리기” 행동 하나. 있으면 8초 이상 보이고 포인터·초점이 있는 동안 멈춘다. 알림 문장에 “되돌릴 수 있어요”를 붙인다.
`undoLabel?`	`ReactNode`		비우면 “되돌리기”.
`progress?`	`boolean`	`false`	진행 중(나중에 update()로 결과가 된다). 작은 스피너, 타이머 없음.
`<ToastProvider limit={2}>`	—	—	앱 셸에 한 번. 영역 <section aria-label="알림" popover="manual">을 그린다(층 7, 모달 위).
`useToasts().show({ message, tone, undo: { onUndo }, duration, progress })`	—	—	지속: info 5초 · undo 8초 이상 · error와 progress는 저절로 닫히지 않음. 포인터·초점·숨은 창에서 멈춘다.
`update(id, patch) / hide(id) / clear()`	—	—	update는 같은 자리에서 바꾸고 다시 알리지 않는다. 진행 → 결과로 바뀔 때만 한 번 알린다.

예시

이렇게 · 이렇게 하지 않기

이렇게 방금 한 행동의 결과를 한 문장으로 말한다(“연결을 끊었어요”). 되돌리기가 있으면 8초 이상 보이고 호버나 초점 중에는 멈춘다.

이렇게 파괴적이지만 되돌릴 수 있는 결과(보관·연결 해제)는 Toast 되돌리기로 끝낸다. 완전 삭제는 ConfirmDialog를 먼저 연다.

이렇게 하지 않기 행동이 필요한 오류나 꼭 읽어야 할 내용을 Toast에 두지 않는다(Alert). 축하·성공 표현을 쓰지 않는다. 한 번에 2개 넘게 보이지 않는다.

토큰과 속성

이름	타입	기본값	설명
`message`	`ReactNode`	`연결을 끊었어요. 보관본은 남아 있어요.`	방금 한 행동의 결과 한 문장.
`description?`	`ReactNode`		둘째 줄(무엇이 남았는지). 선택.
`tone?`	`'info' \| 'error'`	`info`	info는 polite, error는 assertive이고 저절로 닫히지 않는다. success는 없다(info로 합침).
`undo?`	`boolean`	`false`	“되돌리기” 행동 하나. 있으면 8초 이상 보이고 포인터·초점이 있는 동안 멈춘다. 알림 문장에 “되돌릴 수 있어요”를 붙인다.
`undoLabel?`	`ReactNode`		비우면 “되돌리기”.
`progress?`	`boolean`	`false`	진행 중(나중에 update()로 결과가 된다). 작은 스피너, 타이머 없음.
`<ToastProvider limit={2}>`	—	—	앱 셸에 한 번. 영역 <section aria-label="알림" popover="manual">을 그린다(층 7, 모달 위).
`useToasts().show({ message, tone, undo: { onUndo }, duration, progress })`	—	—	지속: info 5초 · undo 8초 이상 · error와 progress는 저절로 닫히지 않음. 포인터·초점·숨은 창에서 멈춘다.
`update(id, patch) / hide(id) / clear()`	—	—	update는 같은 자리에서 바꾸고 다시 알리지 않는다. 진행 → 결과로 바뀔 때만 한 번 알린다.