Toast
액션의 결과를 짧게 알려주고 사라지는 메시지예요. 화면 상단이나 하단에 떠요.
Anatomy
- 01Container블러 반투명 배경, border-radius 12px, padding 13px 16px
- 02Status IconError / Success 상태 구분. 20×20px SVG 아이콘
- 03Message1~2줄 피드백 텍스트. 14px / white
- 04Close수동으로 닫는 버튼. 기본 opacity 55%
Properties
Variant
Default · Error · Success 세 가지.
| Variant | Icon | 색상 | 용도 |
|---|---|---|---|
| Default | — | — | 일반 안내 메시지 |
| Error | --color-state-error #F95C5C | 작업 실패, 오류 발생 | |
| Success | --primitive-green-60 #51B41B | 작업 완료, 저장 성공 |
Position
화면 상단 또는 하단에 50px 여백을 두고 띄워요.
Case
의도와 맥락
흐름을 끊지 않고 액션 결과를 바로 알릴 때 써요. 알아서 사라지니 응답이 필요 없는 상황에만이에요.
01
백그라운드 처리 완료 알림
저장·업로드·설정 변경처럼 요청한 작업이 끝난 직후 결과를 알려요. 화면 흐름은 그대로예요.
02
즉각적인 오류 피드백
네트워크 오류·처리 실패처럼 바로 알아야 하지만 응답은 필요 없는 오류예요. 재시도는 사용자 몫이에요.
03
비파괴적 상태 변경 확인
복사·즐겨찾기처럼 되돌리기 쉬운 액션의 결과를 확인해 줘요. 흐름을 막지 않고 안심시켜요.
!
이런 경우엔 Toast를 쓰지 마세요
- 확인·선택이 필요한 삭제 확인, 약관 동의는 Popup
- 오래 떠 있어야 하는 점검 공지, 결제 오류는 Banner/Alert
- 상세 내용이나 여러 단계 정보(Toast 는 1~2줄까지)
- 여러 이벤트를 한꺼번에(한 번에 하나만)
Guidelines
✓ DO
- 메시지는 1~2줄로 짧게
- 작업 결과(성공/실패)를 즉시 피드백할 때
- 한 번에 하나만
- 자동 닫힘 3,000ms 유지
✗ DON'T
- 확인·결정이 필요하면 Popup
- 긴 메시지나 상세 설명
- 여러 개 동시 노출
- 링크·버튼 등 인터랙션 요소
Toast vs Popup
| Toast | Popup | |
|---|---|---|
| 사용자 확인 필요 | ✗ | ✓ |
| 자동 닫힘 | ✓ 3초 | ✗ |
| 화면 차단 | ✗ | ✓ |
| 적합한 상황 | 저장 완료, 오류 발생 | 삭제 확인, 약관 동의 |
Specification
Container
| 속성 | 값 | 설명 |
|---|---|---|
| background | rgba(44,44,44,0.78) | 블러 + 반투명 |
| backdrop-filter | blur(16px) | |
| border-radius | radius-md (12px) | |
| padding | 13px 16px | |
| max-width | 480px | |
| min-width | 280px | |
| box-shadow | 0 4px 20px rgba(0,0,0,0.25) | |
| position (top) | top: 50px | 화면 상단 기준 |
| position (bottom) | bottom: 50px | 화면 하단 기준 |
Status Icon
| Variant | Background | Icon |
|---|---|---|
| Error | --color-state-error #F95C5C | ! (Exclamation circle) |
| Success | --primitive-green-60 #51B41B | ✓ (Checkmark circle) |
size: 20×20px · self-contained SVG (원+기호 일체형)
Typography
| 요소 | Size | Weight | Color |
|---|---|---|---|
| Message | 14px | 400 | --color-static-white (#ffffff) |
| Close Icon | 16×16px | — | rgba(255,255,255,0.55) |
| Close Icon :hover | — | — | rgba(255,255,255,0.9) |
설치
npm i @polarisoffice/pds-reactVariant
Default · Error · Success. 한 번에 하나만 표시해요.
import { toast } from '@polarisoffice/pds-react';
toast.default('일반 안내 메시지');
toast.error('작업 실패, 오류 발생');
toast.success('작업 완료, 저장 성공');Position
상단·하단 각각 화면 끝에서 50px 여백을 둬요.
import { toast } from '@polarisoffice/pds-react';
toast.success('변경 사항이 저장되었습니다.', { position: 'top' });
toast.error('파일 업로드에 실패했습니다.', { position: 'bottom' });Duration
자동 닫힘 3,000ms 는 그대로 두는 걸 권해요.
import { toast } from '@polarisoffice/pds-react';
toast.success('링크가 클립보드에 복사되었습니다.', { duration: 3000 });