Toast
설치 확인잠깐 떴다 사라지는 알림
1. 목적과 출처
잠깐 떴다 사라지는 알림
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/toast.tsx- Registry
@adcapsule/toast
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| type | 띄워 보기 |
|---|---|
| 성공 success | |
| 안내 info | |
| 경고 warning | |
| 오류 error | |
| 진행 중 loading |
3. 속성 바꿔 보기
띄운 알림 0개
type
4. 설치와 사용
- npm 패키지
- @base-ui/react, lucide-react
- 함께 설치
- @adcapsule/button, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- type: success·info·warning·error·loading
- actionProps로 실행 버튼(되돌리기 등)
- timeout으로 사라지는 시간
- 여러 개는 쌓였다가 마우스를 올리면 펼쳐짐
공통으로 유지할 토큰
- surface.raised (알림, --popover)
- status.success·info·warning·danger (아이콘)
- radius.xl (16px)