Toast

Ephemeral notifications that appear in a fixed-position region. Each toast has a title, optional body, close button, and timer bar. Width is constrained between min-width: 300px and max-width: 420px. The --solid variant uses a filled background. In production, toasts are created via Toast.show() in JavaScript.

Default toast

index.htmlhtml
<div class="ln-toast ln-toast--success border" role="alert" data-ln-dismissible>
  <div class="ln-toast__content">
    <div class="ln-toast__title">Changes saved</div>
    <div class="ln-toast__body">Your profile has been updated successfully.</div>
  </div>
  <button class="ln-toast__close" data-ln-dismiss aria-label="Close">&times;</button>
  <div class="ln-toast__timer" style="width: 70%"></div>
</div>

Solid variant

index.htmlhtml
<div class="ln-toast ln-toast--solid ln-toast--danger" role="alert" data-ln-dismissible>
  <div class="ln-toast__content">
    <div class="ln-toast__title">Error</div>
    <div class="ln-toast__body">Failed to save changes. Please try again.</div>
  </div>
  <button class="ln-toast__close" data-ln-dismiss aria-label="Close">&times;</button>
</div>

Reference

ClassDescriptionResponsive
.ln-toastToast notification containerNo
.ln-toast__iconLeading status iconNo
.ln-toast__contentBody content wrapperNo
.ln-toast__titleToast titleNo
.ln-toast__bodyToast body textNo
.ln-toast__actionAction button areaNo
.ln-toast__closeDismiss buttonNo
.ln-toast__timerAuto-dismiss progress barNo
.ln-toast--solidFilled background variantNo
.ln-toast-regionFixed-position toast containerNo
.ln-toast-region--top-startPosition: top leftNo
.ln-toast-region--top-centerPosition: top centreNo
.ln-toast-region--top-endPosition: top rightNo
.ln-toast-region--bottom-startPosition: bottom leftNo
.ln-toast-region--bottom-centerPosition: bottom centreNo
.ln-toast-region--bottom-endPosition: bottom rightNo