Alert 경고

페이지 수준의 정적 경고입니다(명령형이 아님, Message와 구별). 의미는 live region 역할과 연동됩니다. warning/danger는 role="alert"로 즉시 알리고, info/success는 role="status"로 부드럽게 알립니다.

기본 사용법

네 가지 의미

중성 알림입니다.

작업이 성공적으로 완료되었습니다.

디스크 공간이 곧 부족해집니다.

네트워크 연결이 끊어졌습니다.

<script setup lang="ts">
</script>

<template>
  <!-- 중성 알림 -->
  <LhAlert>중성 알림입니다.</LhAlert>
  <!-- success -->
  <LhAlert type="success">작업이 성공적으로 완료되었습니다.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">디스크 공간이 곧 부족해집니다.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">네트워크 연결이 끊어졌습니다.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 중성 알림 -->
  <LhAlert>중성 알림입니다.</LhAlert>
  <!-- success -->
  <LhAlert type="success">작업이 성공적으로 완료되었습니다.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">디스크 공간이 곧 부족해집니다.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">네트워크 연결이 끊어졌습니다.</LhAlert>
</template>

아이콘과 제목

아이콘과 제목

저장 성공

문서가 클라우드에 동기화되었습니다.

삭제 실패

이 항목은 다른 협업자가 편집하고 있습니다.

<script setup lang="ts">
</script>

<template>
  <!-- 저장 성공 -->
  <LhAlert type="success" show-icon title="저장 성공">문서가 클라우드에 동기화되었습니다.</LhAlert>
  <!-- 삭제 실패 -->
  <LhAlert type="danger" show-icon title="삭제 실패">이 항목은 다른 협업자가 편집하고 있습니다.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 저장 성공 -->
  <LhAlert type="success" show-icon title="저장 성공">문서가 클라우드에 동기화되었습니다.</LhAlert>
  <!-- 삭제 실패 -->
  <LhAlert type="danger" show-icon title="삭제 실패">이 항목은 다른 협업자가 편집하고 있습니다.</LhAlert>
</template>

닫기 가능

닫기 가능

오른쪽 버튼을 클릭해 닫아 보세요.

커스텀 닫기 버튼 문구입니다.

<script setup lang="ts">
</script>

<template>
  <!-- 기본 닫기 문구 -->
  <LhAlert closable>오른쪽 버튼을 클릭해 닫아 보세요.</LhAlert>
  <!-- 커스텀 닫기 문구 -->
  <LhAlert closable close-label="알겠습니다">커스텀 닫기 버튼 문구입니다.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- 기본 닫기 문구 -->
  <LhAlert closable>오른쪽 버튼을 클릭해 닫아 보세요.</LhAlert>
  <!-- 커스텀 닫기 문구 -->
  <LhAlert closable close-label="알겠습니다">커스텀 닫기 버튼 문구입니다.</LhAlert>
</template>

플레인 스타일

플레인 스타일

옅은 배경과 테두리의 플레인 스타일입니다.

옅은 배경에 넣기 적합합니다.

<script setup lang="ts">
</script>

<template>
  <!-- warning 플레인 -->
  <LhAlert type="warning" plain show-icon>옅은 배경과 테두리의 플레인 스타일입니다.</LhAlert>
  <!-- danger 플레인 -->
  <LhAlert type="danger" plain show-icon>옅은 배경에 넣기 적합합니다.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning 플레인 -->
  <LhAlert type="warning" plain show-icon>옅은 배경과 테두리의 플레인 스타일입니다.</LhAlert>
  <!-- danger 플레인 -->
  <LhAlert type="danger" plain show-icon>옅은 배경에 넣기 적합합니다.</LhAlert>
</template>

Alert API

Props

속성	설명	타입	기본값
type	의미 타입	"info" | "success" | "warning" | "danger"	'info'
title	제목(title 슬롯으로도 사용 가능)	string	—
closable	닫기 가능 여부	boolean	false
showIcon	의미 아이콘 표시 여부	boolean	false
plain	옅은 플레인 스타일(흰 배경 + 테두리)	boolean	false
closeLabel	닫기 버튼의 접근성 이름(전달하지 않으면 언어 팩 alert.close 사용)	string	—
sx	sx 빠른 레이아웃 속성	LhSxProps	—

Events

이벤트	설명	매개변수
close	닫기 버튼 클릭 후 발생	—

Slots

슬롯	설명
title	커스텀 제목
default	설명 내용

접근성

• warning/danger → role="alert"(즉시 알림), info/success → role="status"(부드러운 알림)
• 닫기 버튼은 실제 <button>이며, aria-label은 언어 팩 alert.close를 사용하고 :focus-visible 포커스 링을 갖습니다
• 의미 색상의 옅은 배경은 color-mix()로 파생되어 테마와 라이트/다크 모드를 자동으로 따릅니다

타입 정의

이 컴포넌트가 외부로 내보내는 TypeScript 타입 구조는 다음과 같습니다(packages/components/alert/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 펼쳐 전체 정의를 확인하세요. 속성 설명은 위쪽 Props 표를 참고하세요).

LhAlertProps

export interface LhAlertProps {
  /** 의미 타입 */
  type?: LhAlertType
  /** 제목(title 슬롯으로도 사용 가능) */
  title?: string
  /** 닫기 가능 여부 */
  closable?: boolean
  /** 의미 아이콘 표시 여부 */
  showIcon?: boolean
  /** 옅은 플레인 스타일 여부 */
  plain?: boolean
  /** 닫기 버튼의 접근성 이름(전달하지 않으면 언어 팩 alert.close 사용) */
  closeLabel?: string
  /** sx 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhAlertType _{(@lh-ui/share/core/alert에서 가져옴)}

/** 경고 의미 타입 */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'