Feedback

Toast Notifications

Use .quanta-toast-container to hold toasts, and .quanta-toast for each notification. Add a close button and optional icon/title.

<div class="quanta-toast-container top-right">
  <div class="quanta-toast quanta-success">
    <div class="quanta-toast-icon">✔</div>
    <div>
      <div class="quanta-toast-title">Success</div>
      <div class="quanta-toast-body">Your data has been saved.</div>
    </div>
    <button class="quanta-toast-close">×</button>
  </div>
</div>

Position Variants

Apply positioning classes to the container: .top-right, .top-left, .bottom-right, .bottom-left, .top-center, .bottom-center.

<div class="quanta-toast-container bottom-left">…</div>

Semantic Variants

Use semantic classes on each toast for colored border and icon: .quanta-primary, .quanta-success, .quanta-danger, .quanta-warning, .quanta-info, .quanta-neutral, .quanta-accent, .quanta-ghost.

<div class="quanta-toast quanta-danger">…</div>

Progress Bar

Add .quanta-toast-progress inside to show auto-dismiss countdown.

<div class="quanta-toast quanta-primary">
  …
  <div class="quanta-toast-progress" style="animation-duration:4000ms"></div>
</div>