Alert

Static page-level alerts (not imperative — see Message for that). Semantics drive the live-region role: warning/danger use role="alert" for immediate announcement, info/success use role="status" for polite announcement.

Basic Usage

Four Types

A neutral note.

Operation completed.

Disk space is running low.

Network connection lost.

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

<template>
  <!-- Neutral -->
  <LhAlert>A neutral note.</LhAlert>
  <!-- success -->
  <LhAlert type="success">Operation completed.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">Disk space is running low.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">Network connection lost.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Neutral -->
  <LhAlert>A neutral note.</LhAlert>
  <!-- success -->
  <LhAlert type="success">Operation completed.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">Disk space is running low.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">Network connection lost.</LhAlert>
</template>

Icon and Title

Icon and Title

Saved

The document is synced to the cloud.

Delete failed

The item is being edited by another collaborator.

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

<template>
  <!-- Saved -->
  <LhAlert type="success" show-icon title="Saved">The document is synced to the cloud.</LhAlert>
  <!-- Delete failed -->
  <LhAlert type="danger" show-icon title="Delete failed">The item is being edited by another collaborator.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Saved -->
  <LhAlert type="success" show-icon title="Saved">The document is synced to the cloud.</LhAlert>
  <!-- Delete failed -->
  <LhAlert type="danger" show-icon title="Delete failed">The item is being edited by another collaborator.</LhAlert>
</template>

Closable

Closable

Close me with the button on the right.

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

<template>
  <!-- Closable -->
  <LhAlert closable>Close me with the button on the right.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Closable -->
  <LhAlert closable>Close me with the button on the right.</LhAlert>
</template>

Plain Style

Plain

Light outlined style.

Suitable on light backgrounds.

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

<template>
  <!-- warning plain -->
  <LhAlert type="warning" plain show-icon>Light outlined style.</LhAlert>
  <!-- danger plain -->
  <LhAlert type="danger" plain show-icon>Suitable on light backgrounds.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning plain -->
  <LhAlert type="warning" plain show-icon>Light outlined style.</LhAlert>
  <!-- danger plain -->
  <LhAlert type="danger" plain show-icon>Suitable on light backgrounds.</LhAlert>
</template>

API

Props

Prop	Description	Type	Default
type	Semantic type	"info" | "success" | "warning" | "danger"	'info'
title	Title (or use the title slot)	string	—
closable	Show the close button	boolean	false
showIcon	Show the semantic icon	boolean	false
plain	Light outlined style	boolean	false
closeLabel	Accessible name of the close button (falls back to the alert.close locale message)	string	—
sx	sx quick-layout properties	LhSxProps	—

Events

Event	Description	Callback
close	Fired after the close button is clicked	—

Slots

Slot	Description
title	Custom title
default	Description content

Accessibility

• warning/danger → role="alert" (immediate); info/success → role="status" (polite)
• The close button is a real <button> with an aria-label from the alert.close locale message and a :focus-visible ring
• Tinted backgrounds derive from semantic colors via color-mix(), following theme and dark mode automatically

Type Definitions

The TypeScript type structures exported by this component (auto-extracted from packages/components/alert/src/types.ts and @lh-ui/share/core/* sources; click each entry to expand; see the Props table above for attribute descriptions):

LhAlertProps

export interface LhAlertProps {
  type?: LhAlertType
  title?: string
  closable?: boolean
  showIcon?: boolean
  plain?: boolean
  closeLabel?: string
  sx?: LhSxProps
}

LhAlertType _{(from @lh-ui/share/core/alert)}

export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'