Toast - Baseline UI

Basic Structure

Toast notifications appear temporarily to provide feedback without interrupting the user's workflow.

HTML

<div class="bl-toast-container bl-toast-top-right">
  <div class="bl-toast">
    <div class="bl-toast-content">
      <h3 class="bl-toast-title">Success</h3>
      <p class="bl-toast-message">Your changes have been saved.</p>
    </div>
    <button class="bl-toast-close">×</button>
  </div>
</div>

Positions

Toasts can be positioned in 6 different locations on the screen.

bl-toast-top-left

bl-toast-top-center

bl-toast-top-right

bl-toast-bottom-left

bl-toast-bottom-center

bl-toast-bottom-right

Variants

Toast notifications come in four semantic variants.

Success Toast

HTML

<div class="bl-toast bl-toast-success">
  <div class="bl-toast-content">
    <h3 class="bl-toast-title">Success</h3>
    <p class="bl-toast-message">Operation completed successfully.</p>
  </div>
  <button class="bl-toast-close">×</button>
</div>

Error Toast

HTML

<div class="bl-toast bl-toast-error">
  <div class="bl-toast-content">
    <h3 class="bl-toast-title">Error</h3>
    <p class="bl-toast-message">Something went wrong.</p>
  </div>
  <button class="bl-toast-close">×</button>
</div>

Warning Toast

HTML

<div class="bl-toast bl-toast-warning">
  <div class="bl-toast-content">
    <h3 class="bl-toast-title">Warning</h3>
    <p class="bl-toast-message">Please review your input.</p>
  </div>
  <button class="bl-toast-close">×</button>
</div>

Info Toast

HTML

<div class="bl-toast bl-toast-info">
  <div class="bl-toast-content">
    <h3 class="bl-toast-title">Info</h3>
    <p class="bl-toast-message">New update available.</p>
  </div>
  <button class="bl-toast-close">×</button>
</div>

With Icon

Add icons to make toasts more expressive.

HTML

<div class="bl-toast bl-toast-success">
  <span class="bl-toast-icon"><i class="fas fa-check-circle"></i></span>
  <div class="bl-toast-content">
    <h3 class="bl-toast-title">Success</h3>
    <p class="bl-toast-message">Changes saved successfully.</p>
  </div>
  <button class="bl-toast-close">×</button>
</div>

Features

6 Positions: Top/bottom with left/center/right alignment
4 Semantic Variants: Success, error, warning, info
Smooth Animations: Slide-in and slide-out transitions
Glassmorphism Design: Beautiful glass effect with backdrop blur
Auto-dismiss: Optional automatic dismissal after timeout
Stacking: Multiple toasts stack vertically
Icon Support: Add Font Awesome icons for visual feedback

Interactive Demo

Click the buttons to see toast notifications in action. The Baseline UI JavaScript handles everything automatically.

Toast Variants

Toast Positions

JavaScript Usage

The Baseline UI JavaScript provides simple functions to show toasts. No manual DOM manipulation needed!

Basic Usage

JavaScript

// Success toast
showToastSuccess('Changes saved!');

// Error toast
showToastError('Something went wrong!');

// Warning toast
showToastWarning('Please review your input.');

// Info toast
showToastInfo('New update available.');

With Options

JavaScript

// Custom position and duration
showToastSuccess('Profile updated!', {
  position: 'top-center',
  duration: 3000  // Auto-dismiss after 3 seconds
});

// With custom title
showToastError('Upload failed!', {
  title: 'Upload Error',
  position: 'bottom-right',
  duration: 5000
});

Available Options

JavaScript

showToast(message, type, {
  position: 'top-right',     // top-left, top-center, top-right,
                              // bottom-left, bottom-center, bottom-right
  duration: 3000,             // Auto-dismiss time in ms (0 = no auto-dismiss)
  title: 'Custom Title',      // Toast title
  closable: true              // Show close button
});