Skip to Content
ComponentsFoundationFeedbackToast

Toast

임시 알림 메시지를 표시하는 토스트 컴포넌트입니다.

개요

Toast는 화면 모서리에 나타났다 자동으로 사라지는 알림 컴포넌트입니다. sonner 라이브러리를 사용합니다.

주요 특징:

  • 4가지 Variant (success, warning, danger, info)
  • 위치 조절 (top-right, bottom-right 등)
  • 자동 닫기
  • Promise 기반 API

사용 사례:

  • 성공 알림
  • 에러 알림
  • 정보 알림
  • 작업 완료 안내

설치

npx @vortex/cli add sonner --package foundation

기본 사용법

import { toast } from "sonner";
 
export default function Example() {
  return <Button onClick={() => toast("알림 메시지")}>토스트 표시</Button>;
}

Variants (변형)

toast.success("성공!");
toast.error("오류 발생");
toast.warning("경고");
toast.info("정보");

Props API

PropTypeDefaultDescription
positionstring’bottom-right’토스트 위치
durationnumber4000표시 시간 (ms)

예제

export default function ToastExample() {
  const handleSave = async () => {
    toast.promise(saveData(), {
      loading: "저장 중...",
      success: "저장 완료!",
      error: "저장 실패",
    });
  };
 
  return <Button onClick={handleSave}>저장</Button>;
}

관련 컴포넌트

  • Alert - 알림 메시지
Last updated on
PopoverTooltip