Components
Toast
Radix Toast 기반 알림 — info / success / warning / error
헤드리스는 @radix-ui/react-toast 로 고정. sonner 전환은 검토했으나 채택하지 않음.
사용
import {
Toast, ToastProvider, ToastViewport,
} from "@fluxloop-ai/pds-ui/components/toast";
<ToastProvider>
<Toast variant="success" title="저장됨" description="변경사항이 저장됐어요." />
<ToastViewport />
</ToastProvider>Demo
With description
Title only
Props
<Toast />
| Prop | 타입 | 기본 | 설명 |
|---|---|---|---|
variant | info | success | warning | error | info | 좌측 아이콘 + 색상 |
title | ReactNode | — | 제목 |
description | ReactNode | — | 설명 |
action | ReactNode | — | <ToastAction> 버튼 |
duration | number | 3000 | auto-close ms. Infinity 면 유지 |
open / defaultOpen / onOpenChange | Radix | — | controlled API |
<ToastProvider />
Radix Provider — duration, swipeDirection, swipeThreshold. viewport 는 <ToastViewport />.
Variant 색상
| Variant | 아이콘 | 토큰 |
|---|---|---|
info | Info | --pds-label-alternative |
success | CheckCircle2 | --pds-status-positive |
warning | AlertTriangle | --pds-status-cautionary |
error | AlertCircle | --pds-status-negative |
Registry 설치
npx shadcn add https://pds.pluto.com/r/toast