Sonner

Stablev1.0.0

전역 토스트(알림) 컴포넌트. sonner 라이브러리 기반.

// 1. app/layout.tsx 에 Toaster 마운트
import { Toaster } from "@/components/ui/sonner";

<Toaster />

// 2. 어디서든 toast 호출
import { toast } from "sonner";

toast("Event has been created");

Installation

pnpm dlx shadcn@latest add https://groudit.com/r/sonner.json

Variants

toast.success("Saved successfully");
toast.error("Something went wrong");
toast.info("New version available");
toast.warning("Subscription expires soon");

Composition

Toaster

Accessibility

이 컴포넌트는 WAI-ARIA status 패턴을 따릅니다.

WCAG 2.1 AA

이 컴포넌트는 다음 Success Criteria 충족을 목표로 합니다.

Notes

  • 토스트는 aria-live="polite" 로 스크린리더에 안내.
  • 자동 사라짐 — 사용자가 읽기 충분한 duration (최소 5초) 설정.