Sonner

저장 확인, 업로드, 실행 취소 창에 대한 중첩된 토스트 알림 — 네오브루탈리즘 스타일의 테두리와 그림자 효과를 적용했습니다.

"use client"

import { toast } from "sonner"

Sonner는 toast() 한 번으로 쌓이고 자동으로 사라지는 토스트를 화면에 올립니다. <Toaster />를 한 번 마운트하면 어디서든 알림을 보낼 수 있고, context 연결은 필요 없습니다. Radix나 Base UI 프리미티브가 아닙니다. 두 백엔드 변형 모두 emilkowalski의 Sonner 라이브러리를 감싸며, 네오브루탈리즘 공식(두꺼운 테두리, 선명한 그림자, 굵은 서체)에 맞춰 스타일을 입혔습니다.

다음과 같은 경우에 사용합니다.

동작 피드백 — 뮤테이션이 끝난 뒤 "저장됨", "클립보드에 복사됨", "설정이 업데이트됨".
비동기 작업 — toast.promise()로 업로드나 배포를 로딩부터 성공·오류까지 토스트 하나로 추적합니다.
실행 취소 창 — 삭제와 보관에 동작 버튼을 두어 파괴적 작업에 유예 시간을 줍니다.

소개

Sonner는 emilkowalski가 개발하고 유지 관리합니다.

설치

다음 명령을 실행합니다.


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
npx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/sonner.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/sonner.json

Toaster 컴포넌트를 추가합니다.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

다음 의존성을 설치합니다.


pnpm add sonner next-themes
npm install sonner next-themes
yarn add sonner next-themes
bun add sonner next-themes

다음 코드를 복사하여 프로젝트에 붙여넣습니다.

components/ui/sonner.tsx

"use client"

import {
  CircleCheckIcon,
  InfoIcon,
  Loader2Icon,
  OctagonXIcon,
  TriangleAlertIcon,
} from "lucide-react"
import { useTheme } from "next-themes"
import { Toaster as Sonner, type ToasterProps } from "sonner"

const Toaster = ({ ...props }: ToasterProps) => {
  const { theme = "system" } = useTheme()

  return (
    <Sonner
      theme={theme as ToasterProps["theme"]}
      className="toaster group"
      icons={{
        success: <CircleCheckIcon className="size-4" />,
        info: <InfoIcon className="size-4" />,
        warning: <TriangleAlertIcon className="size-4" />,
        error: <OctagonXIcon className="size-4" />,
        loading: <Loader2Icon className="size-4 animate-spin" />,
      }}
      toastOptions={{
        // Fully unstyled so the neobrutalist recipe below owns every surface:
        // hard offset shadow, 2px border, square corners, press-down buttons.
        unstyled: true,
        classNames: {
          toast:
            "group/toast relative flex w-(--width) items-center gap-3 rounded border-2 border-border bg-popover p-4 font-sans text-popover-foreground shadow-md",
          content: "flex min-w-0 flex-col gap-0.5",
          title: "font-head text-sm font-medium",
          description: "text-sm text-muted-foreground",
          icon: "shrink-0",
          actionButton:
            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-primary px-2 py-1 text-xs font-medium text-primary-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
          cancelButton:
            "ms-auto h-fit min-w-fit shrink-0 rounded border-2 border-border bg-muted px-2 py-1 text-xs font-medium text-foreground shadow-sm transition-all duration-200 hover:translate-x-0.5 hover:translate-y-0.5 hover:shadow-none",
          closeButton:
            "absolute -top-2 -start-2 rounded-full border-2 border-border bg-background p-0.5 transition-colors hover:bg-muted",
          success: "[&_[data-icon]]:text-chart-2",
          warning: "[&_[data-icon]]:text-chart-1",
          error: "[&_[data-icon]]:text-destructive",
        },
      }}
      {...props}
    />
  )
}

export { Toaster }

Toaster 컴포넌트를 추가합니다.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Toaster />
        <main>{children}</main>
      </body>
    </html>
  )
}

사용법

import { toast } from "sonner"

toast("Event has been created.")

예제

종류

"use client"

import { toast } from "sonner"

설명

"use client"

import { toast } from "sonner"

위치

position prop을 사용하여 토스트의 위치를 변경합니다.

"use client"

import { toast } from "sonner"

접근성

토스트용 전용 WAI-ARIA APG 패턴은 없습니다. 가장 가까운 안내는 Alert 패턴입니다. Sonner는 토스트를 polite ARIA live region에 렌더링하므로 스크린 리더가 포커스를 뺏지 않고 읽습니다. 이 영역은 일반 탭 순서 밖에 있고 단축키로만 도달할 수 있으며, 스택에 호버·포커스가 있거나 탭이 숨겨져 있으면 닫기 타이머가 멈춥니다.

키보드 상호작용:

키	동작
`Alt + T`	토스트 스택에 포커스하고 펼치기(`Toaster`의 `hotkey` prop으로 설정)
`Tab` / `Shift + Tab`	토스트와 동작/닫기 버튼 사이로 이동
`Enter` / `Space`	포커스된 동작 또는 닫기 버튼 활성화
`Escape`	포커스가 안에 있을 때 토스트 스택 접기

API 참조

자세한 내용은 Sonner API 참조를 확인하세요.