Toast
현재 작업을 막지 않고 짧은 결과를 전역 큐로 알립니다.
- 성숙도
- 후보
- 소스 경로
components/ui/toast.tsx- 소스
- 소스
- 외부 의존성
radix-ui
실제 미리보기
사용할 때
사용 기준
저장, 업로드, 되돌리기처럼 짧은 결과와 선택 동작에 씁니다.
사용하지 않을 때
지속되는 오류나 반드시 결정해야 하는 내용에는 Alert나 Alert Dialog를 씁니다.
변형과 상태
success직접 조작완료 결과를 한 문장으로 설명합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
error직접 조작오류는 더 오래 표시하고 복구 설명은 짧게 유지합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
action직접 조작되돌리기 같은 한 가지 보조 동작만 제공합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
queued직접 조작세 개를 넘는 알림은 앞선 알림이 닫힐 때까지 대기합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
persistent직접 조작duration 0은 사용자가 직접 닫을 때까지 유지합니다.
미리보기 컨트롤을 직접 조작해 이 상태를 확인합니다.
접근성
일반 결과는 status, 오류는 alert로 알리고 번역된 닫기 이름을 제공합니다.
API
| 속성 | 타입 | 필수 | 설명 |
|---|---|---|---|
show | (options: ToastOptions) => string | 예 | 알림을 표시하거나 같은 ID를 갱신합니다. |
duration | number | 아니요 | 자동 닫기 시간이며 0이면 유지됩니다. |
tone | "neutral" | "info" | "success" | "warning" | "error" | 아니요 | 알림 결과의 의미입니다. |
action | { label: string; onClick: () => void } | 아니요 | 한 가지 선택 동작입니다. |
사용 예시
지원 importimport { ToastProvider, useToast } from "@/components/ui/toast"
const toast = useToast();
toast.success("Saved", { description: "Changes are live." })