Alert

확인 버튼 하나짜리 알림이다. 사용자에게 선택지가 없으므로 dim 클릭과 ESC 로는 닫히지 않고, 반드시 확인을 눌러야 한다. 명령형으로만 쓴다.

import { useAlert, Alert } from "@nui-kit/react";
// 서브패스로 좁힐 때
import { useAlert } from "@nui-kit/react/popup";
import "@nui-kit/react/styles/popup.css";   // 온디맨드일 때

useAlert() 는 앱 루트의 PopupHost 가 있어야 동작한다. 설치는 Popup 개요 에 있다.

열기

alert.open({ title: "저장 완료", description: "변경 사항이 저장되었습니다." });

useAlert().open()

버튼 문구와 아이콘

confirmText 로 버튼 문구를, icon 으로 상단 아이콘을 바꾼다. icon={null} 이면 아이콘 자리가 없어진다.

alert.open({ title: "…", confirmText: "알겠습니다", icon: null });

confirmText · icon

확인을 눌러도 닫지 않기

shouldCloseOnConfirm: false 면 확인을 눌러도 열려 있다. 확인 처리에 시간이 걸려 직접 close() 해야 할 때 쓴다.

alert.open({ title: "…", shouldCloseOnConfirm: false, onConfirm: () => setTimeout(alert.close, 800) });

shouldCloseOnConfirm: false → close() 로 닫는다

옵션

옵션	기본값	설명
`title` · `description`	—	제목과 본문. 둘 다 ReactNode
`icon`	주의 아이콘	`null` 이면 아이콘 자리를 없앤다
`confirmText`	"확인"	버튼 문구
`onConfirm`	—	확인을 눌렀을 때
`shouldCloseOnConfirm`	`true`	`false` 면 확인을 눌러도 열려 있다. `close()` 로 직접 닫는다
`id`	자동 생성	`close(id)` 로 특정 팝업을 닫을 때

접근성

제목이 없으면 aria-label="Alert 팝업" 이 붙는다
dim 클릭 · ESC 로 닫히지 않는다. 선택을 요구하는 팝업이 실수로 닫히면 사용자가 내용을 봤는지 알 수 없기 때문이다
닫기 버튼이 없다. 확인 버튼이 유일한 출구다
포커스 트랩 · 배경 inert · 모션 감소 등 공통 계약은 Popup 개요

API

Alert

PopupHost 가 렌더하는 컴포넌트다. 직접 그리는 일은 드물고, 훅의 옵션이 곧 이 props 다.

이름	타입	기본값	설명
`open` *	boolean	—	—
`className`	string	—	—
`confirmText`	ReactNode	—	—
`description`	ReactNode	—	—
`icon`	ReactNode \| null	—	—
`id`	string	—	—
`isTopmost`	boolean	—	스택 최상단인가 — 포커스 트랩과 ESC 를 이 팝업만 처리한다
`onConfirm`	() => void	—	—
`onExited`	() => void	—	닫힘 애니메이션까지 끝난 뒤 호출된다
`title`	ReactNode	—	—

AlertProps 에서 자동 생성됨 (components/Popup/Popup.types.ts).