Alert
확인 버튼만 있는 알림 다이얼로그입니다. Foundation AlertDialog를 기반으로 하며, backdrop 클릭으로 닫히지 않는 persistent 모달입니다.
사용법
import { Alert } from "@vortex/ui-cals"
function Example() {
const [open, setOpen] = useState(false)
return (
<>
<button onClick={() => setOpen(true)}>알림</button>
<Alert
open={open}
onOpenChange={setOpen}
title="알림"
content="작업이 완료되었습니다."
/>
</>
)
}예제
기본 사용
HTML 콘텐츠
children을 전달하면 content 대신 커스텀 HTML 콘텐츠가 렌더링됩니다.
<Alert title="공지사항">
<div>
<strong>시스템 점검 안내</strong>
<p>2024년 1월 15일 02:00~06:00 시스템 점검</p>
</div>
</Alert>Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
open | boolean | - | 열림/닫힘 상태 |
onOpenChange | (open: boolean) => void | - | 상태 변경 콜백 |
title | string | - | 다이얼로그 제목 |
content | ReactNode | - | 본문 콘텐츠 |
confirmText | string | "확인" | 확인 버튼 텍스트 |
onConfirm | () => void | - | 확인 클릭 콜백 |
visible | boolean | true | false이면 렌더링하지 않음 |
className | string | - | 추가 CSS 클래스 |
children | ReactNode | - | 커스텀 콘텐츠 |
접근성
role="alertdialog"적용 (AlertDialog 기본)aria-labelledby로 제목 연결- Enter 키로 확인 동작
- backdrop 클릭으로 닫히지 않음 (persistent)
관련 컴포넌트
- Confirm — 확인/취소 선택 다이얼로그
Last updated on