Skip to content
FeedbackBrowse feedback components
ComponentsFeedbackStable

Toast

Slide-in notification with semantic left stripe. Use the lm-toaster region for stacking.

Live preview

Backup completed

128 GB encrypted snapshot uploaded.

License renewing in 9 days

Usage

Adapters:React stableVue stable
index.html
<div class="lm-toaster" aria-live="polite">
  <div class="lm-toast lm-toast-success">…</div>
</div>

CSS classes (4)

ClassDescription
lm-toastBase toast card
lm-toast-{tone}info | success | warning | danger
lm-toast-titleBold title row
lm-toasterFixed bottom-right region for stacking toasts

React props (2)

PropTypeDefaultDescription
toneToneinfo
durationnumber5000Auto-dismiss ms

Accessibility

  • Wrap in aria-live='polite' region.
  • Provide a manual dismiss button — never auto-only.
  • Pause auto-dismiss on hover/focus.

Spotted something wrong? Edit this entry on GitHub.