Alert
설치 확인default·info·success·warning·destructive 안내
1. 목적과 출처
default·info·success·warning·destructive 안내
- 출처
- shadcn 기본 제공 (Base UI 기반 base-nova 스타일)
- 프로젝트
src/components/ui/alert.tsx- Registry
@adcapsule/alert
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| variant | 모양 |
|---|---|
| 기본 default | 새 기능 목록에서 여러 이슈를 한 번에 고를 수 있습니다. |
| 안내 info | 점검 안내 11월 15일 오전 2시부터 30분 동안 저장이 멈춥니다. |
| 성공 success | 저장했습니다 변경 내용이 팀원에게 보입니다. |
| 경고 warning | 마감이 지났습니다 이슈 3개의 마감일을 다시 정하세요. |
| 오류 destructive | 저장하지 못했습니다 네트워크를 확인하고 다시 시도하세요. |
3. 속성 바꿔 보기
점검 안내
11월 15일 오전 2시부터 30분 동안 저장이 멈춥니다.
variant
4. 설치와 사용
- npm 패키지
- class-variance-authority
- 함께 설치
- @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- variant: default·info·success·warning·destructive
- 아이콘은 맨 앞 자식으로
- AlertAction으로 오른쪽 버튼
- 잠깐 뜨는 알림은 Toast를 쓴다
공통으로 유지할 토큰
- surface.panel (배경, --card)
- status.info·success·warning (아이콘)
- status.danger (destructive 글자)
- radius.lg (10px)