Alert 경고

페이지 내에서 중요한 알림 메시지를 표시합니다.

기본 사용법

정보

정보 메시지입니다.

성공

성공 메시지입니다.

경고

경고 메시지입니다(단순 스타일).

위험 메시지입니다(제목 없음).

외부 상태 연동

닫기는 내부적으로 비제어 방식입니다: 닫기 버튼을 누르면 마운트가 해제됩니다. 다시 열 수 있게 하려면 외부 조건부 렌더링으로 감싸세요.

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="성공 알림" showIcon closable>
      이것은 성공 알림입니다.
    </LhAlert>
  )
}

Alert Props

프로퍼티	설명	타입	선택 가능한 값	기본값
type	타입	`'info' \| 'success' \| 'warning' \| 'danger'`	—	`'info'`
title	제목 (전달하지 않으면 제목 줄을 렌더링하지 않음)	`ReactNode`	—	—
closable	닫을 수 있는지 여부	`boolean`	—	`false`
showIcon	타입 아이콘 표시 여부	`boolean`	—	`false`
plain	아웃라인 스타일 (연한 테두리) 적용 여부	`boolean`	—	`false`
closeLabel	닫기 버튼의 접근성 이름 (미전달 시 언어 팩 `alert.close` 사용)	`string`	—	`'关闭警告'`
sx	빠른 레이아웃 프로퍼티	`SxProps`	—	—

Alert 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onClose	닫기 버튼 클릭 시 발생	`(event: MouseEvent) => void`	`@close`

닫기 동작은 내부 비제어

닫기 버튼을 클릭하면 Alert이 곧바로 언마운트되고 (트랜지션 없음) onClose를 발생시킵니다. 「닫은 뒤 다시 열고 싶다면」 외부 상태로 조건부 렌더링을 감싸세요. 컴포넌트 내부 상태에 의존하지 마세요.

접근성 live region

type이 warning / danger이면 role="alert"을 출력하여 즉시 읽어줍니다. info / success는 role="status"를 출력하여 순차적으로 읽어주며, 사용자의 현재 조작을 끊지 않도록 합니다.

스타일

import '@lh-ui/react/style/alert'

기본 사용법​

Alert Props​

Alert 이벤트​

스타일​

기본 사용법

Alert Props

Alert 이벤트

스타일