FeedbackBrowse feedback components
Alert
Inline message with semantic stripe accent. 4 tones, optional title and icon.
Live preview
✓
Settings saved
Changes apply on next sign-in.
!
License renewing in 9 days
Usage
Adapters:React stableVue stable
index.html
<div class="lm-alert lm-alert-success" role="status">
<span>✓</span>
<div>
<p class="lm-alert-title">Settings saved</p>
<p class="lm-hint">Changes apply on next sign-in.</p>
</div>
</div>CSS classes (3)
| Class | Description |
|---|---|
lm-alert | Base callout |
lm-alert-{tone} | info | success | warning | danger |
lm-alert-title | Bold title row |
React props (3)
| Prop | Type | Default | Description |
|---|---|---|---|
tone | Tone | info | — |
title | string | — | — |
icon | ReactNode | — | — |
Accessibility
- Use role='status' for non-urgent updates.
- Use role='alert' for time-sensitive errors only — it interrupts screen readers.
Spotted something wrong? Edit this entry on GitHub.