Предупреждение

Статическое предупреждение на уровне страницы (не императивный сервис, в отличие от 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'