Alert
core알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.
컴포넌트 의존 관계
깊이
100%
Variants
Information
This is an informational message.
Success
Operation completed successfully.
Warning
Please review before proceeding.
Error
Something went wrong.
Dismissible
닫기 버튼이 있는 Alert
Dismissible Info
Click the X to dismiss this alert.
Dismissible Success
Your changes have been saved.
Without Title
A simple alert without a title.
This action cannot be undone.
테스트 커버리지
2026년 2월 4일4/4 통과
4성공
0실패
4전체
- alert role을 갖는다
- title과 children을 렌더링한다
- variant에 따른 스타일을 적용한다
- dismissible일 때 닫기 버튼을 표시한다
Alert Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" | 알림 변형 (색상 및 아이콘 결정) |
title | string | — | 알림 제목 |
icon | ReactNode | — | 커스텀 아이콘. 미지정 시 변형에 따른 기본 아이콘 사용 |
dismissible | boolean | false | 닫기 버튼 표시 여부 |
onDismiss | () => void | — | 닫기 버튼 클릭 핸들러 |
Import
tsx
import { Alert } from "@reopt-ai/opt-ui";