Skip to Content

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타입기본값설명
openboolean-열림/닫힘 상태
onOpenChange(open: boolean) => void-상태 변경 콜백
titlestring-다이얼로그 제목
contentReactNode-본문 콘텐츠
confirmTextstring"확인"확인 버튼 텍스트
onConfirm() => void-확인 클릭 콜백
visiblebooleantruefalse이면 렌더링하지 않음
classNamestring-추가 CSS 클래스
childrenReactNode-커스텀 콘텐츠

접근성

  • role="alertdialog" 적용 (AlertDialog 기본)
  • aria-labelledby로 제목 연결
  • Enter 키로 확인 동작
  • backdrop 클릭으로 닫히지 않음 (persistent)

관련 컴포넌트

  • Confirm — 확인/취소 선택 다이얼로그
Last updated on