Toast

vel-src: toast.css

Non-blocking notification messages that appear briefly to inform users of actions, warnings, errors, or successes.

Class	Properties
vel-toast	Base toast notification element
vel-toast-container	Wrapper that stacks multiple toasts and sets position
vel-toast-top-right	Positions the container at the top-right of the viewport
vel-toast-top-left	Positions the container at the top-left of the viewport
vel-toast-bottom-right	Positions the container at the bottom-right of the viewport
vel-toast-bottom-left	Positions the container at the bottom-left of the viewport
vel-toast-top-center	Positions the container at the top-center of the viewport
vel-toast-bottom-center	Positions the container at the bottom-center of the viewport
vel-toast-info	Blue-accented informational toast variant
vel-toast-success	Green-accented success toast variant
vel-toast-warning	Amber-accented warning toast variant
vel-toast-danger	Red-accented error/danger toast variant
vel-toast-dismiss	Close button element inside the toast

Examples

Toast variants

Info: Your session will expire in 10 minutes.

Success: Profile updated successfully.

Warning: Storage is nearing capacity.

Error: Failed to save changes. Please retry.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <div style="display:flex;flex-direction:column;gap:10px;max-width:360px;">
    <div class="vel-toast vel-toast-info">
      <strong>Info:</strong> Your session will expire in 10 minutes.
      <button class="vel-toast-dismiss" aria-label="Dismiss">&times;</button>
    </div>
    <div class="vel-toast vel-toast-success">
      <strong>Success:</strong> Profile updated successfully.
      <button class="vel-toast-dismiss" aria-label="Dismiss">&times;</button>
    </div>
    <div class="vel-toast vel-toast-warning">
      <strong>Warning:</strong> Storage is nearing capacity.
      <button class="vel-toast-dismiss" aria-label="Dismiss">&times;</button>
    </div>
    <div class="vel-toast vel-toast-danger">
      <strong>Error:</strong> Failed to save changes. Please retry.
      <button class="vel-toast-dismiss" aria-label="Dismiss">&times;</button>
    </div>
  </div>
</div>