The <luna-alert> component displays contextual feedback.
Paths
/lunadom/components/alert/alert.js REQUIRED
Example
This is a default alert.
Variants
ℹ️
Default alert with icon.
✅
Success alert with icon.
⚠️
Warning alert with icon.
🚨
Dismissible danger alert with icon.
🔥
Custom themed alert using CSS variables.
Customization
Slots
icon - Icon for the alert
default - Message for the alert
Attributes
variant="info" - Variant of the alert (info, success, warning, danger)
dismissible - Whether the alert is dismissible
open - Whether the alert is open
CSS Variables
--luna-alert-bg - Alert background color
--luna-alert-color - Alert text color
--luna-alert-border - Alert border color
Events
luna-dismiss - Emitted when the alert is dismissed
Example Code
<!-- Variants -->
<luna-alert variant="info">
<span slot="icon">ℹ️</span>
This is a standard informational alert.
</luna-alert>
<luna-alert variant="success">
<span slot="icon">✅</span>
Your changes have been successfully deployed.
</luna-alert>
<luna-alert variant="warning">
<span slot="icon">⚠️</span>
Your storage is almost full.
</luna-alert>
<!-- Dismissible -->
<luna-alert variant="danger" dismissible>
<span slot="icon">🚨</span>
Something went wrong. This alert is dismissible.
</luna-alert>
<!-- Custom Styling -->
<luna-alert variant="info" style="--luna-alert-bg: #222;">
<span slot="icon">🔥</span>
Custom themed alert using CSS variables.
</luna-alert>