Sonner

React용 토스트 알림 컴포넌트입니다.

examples/krds/sonner-demo.tsx

"use client"

import * as React from "react"

개요

Sonner는 emilkowalski가 만들고 유지관리하는 토스트 라이브러리입니다. KRDS 포팅에서는 shadcn/ui API를 유지하면서 색상, 간격, 모서리, 액션 버튼을 KRDS 알림 문맥에 맞춥니다.

설치

다음 명령어로 KRDS Sonner 컴포넌트를 추가합니다.

pnpm dlx shadcn@latest add https://krdscn.gwlee.kr/r/sonner.json

앱 레이아웃에 Toaster 컴포넌트를 추가합니다.

app/layout.tsx

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

사용법

import { toast } from "sonner"

toast("신청서가 저장되었습니다.")

예제

유형

examples/krds/sonner-types.tsx

"use client"

import { toast } from "sonner"

설명 포함

examples/krds/sonner-description.tsx

"use client"

import { toast } from "sonner"

위치

position prop으로 토스트가 표시되는 위치를 변경합니다.

examples/krds/sonner-position.tsx

"use client"

import { toast } from "sonner"

API 참조

자세한 API는 Sonner API 문서를 참고합니다.

Slider Spinner