Material Design Toast & Snackbar Library with Action Buttons – MiniSnackbar

MiniSnackbar is a vanilla JavaScript library that displays toast notifications and snackbar messages. It provides queue management for multiple messages and supports action buttons with callback handlers.

The library automatically integrates with Material Web components when detected. It matches your site’s Material Design theme without additional configuration.

Features:

Sponsored
• Zero Dependencies: Runs on pure vanilla JavaScript with no external library requirements.
• Lightweight: Weights at approximately 2KB minified for minimal page weight impact.
• Queue Management: Handles multiple notification requests automatically with sequential display logic.
• Action Buttons: Supports interactive buttons with custom callback handlers for undo operations or navigation.
• Theming: Provides CSS custom properties for colors, typography, shadows, and animation timing.
• Modular: Available in UMD, ESM, and CommonJS formats for different build systems.
• Accessible: Implements ARIA attributes and keyboard navigation for screen reader compatibility.
• Mobile Optimized: Adjusts positioning and sizing for small viewport dimensions.

How To Use It:

1. Install the library via NPM.

# NPM
$ npm install minisnackbar

// Import the Snackbar class
import { Snackbar } from 'minisnackbar'

2. Or use the UMD build if your projects aren’t using a module bundler:

<!-- Local -->
<script src="/dist/minisnackbar.min.js"></script>

<!-- OR from a CDN -->
<script src="https://unpkg.com/minisnackbar/dist/minisnackbar.min.js"></script>

3. Initialize the library. This must run before showing messages:

Snackbar.init()

4. Display a simple notification:

Snackbar.add('Operation completed successfully')

5. Sets the animation duration in milliseconds for show and hide transitions. Default value is 250. Higher values create slower, more deliberate animations. Lower values make notifications appear and disappear more quickly.

// Initialize with faster animations
Snackbar.init({ transitionDuration: 150 })

// Initialize with slower, more noticeable transitions
Snackbar.init({ transitionDuration: 400 })

6. API methods.

// Initialize the snackbar system - required before any other method calls
// Must be called once per page load
Snackbar.init()

// Initialize with custom animation duration (in milliseconds)
Snackbar.init({ transitionDuration: 300 })

// Add a message to the queue - displays after current message completes
// Parameters: message (string), action (object|null), duration (number in ms)
Snackbar.add('File uploaded successfully')

// Add message with custom duration (5 seconds instead of default 3)
Snackbar.add('This message stays longer', null, 5000)

// Add message with action button
// The action object requires 'text' (button label) and 'handler' (click callback)
Snackbar.add('Item deleted', {
  text: 'UNDO',
  handler: () => {
    // Your undo logic here
    console.log('Undo clicked')
  }
}, 3000)

// Show message immediately - interrupts current snackbar if one is displaying
// Useful for urgent notifications that shouldn't wait in queue
Snackbar.show('Critical error occurred!')

// Show message with action button immediately
Snackbar.show('Connection lost', {
  text: 'RETRY',
  handler: () => {
    // Reconnection logic
    attemptReconnect()
  }
})

// Hide the currently displayed snackbar before its timer expires
Snackbar.hideCurrent()

// Clear all pending messages from the queue
// Current message continues displaying until its timer expires
Snackbar.clearQueue()

// Check if the library has been initialized
// Returns: boolean
if (Snackbar.isInitialized()) {
  console.log('Ready to display notifications')
}

// Get the current transition duration setting in milliseconds
// Returns: number
const duration = Snackbar.getTransitionDuration()
console.log(`Animations take ${duration}ms`)

// Completely destroy the snackbar instance
// Removes DOM elements, clears queue, resets all state
// Call this when unmounting components or cleaning up
Snackbar.destroy()

7. The library uses CSS custom properties for complete visual control. Define these variables in your stylesheet:

:root {
  /* Background and text colors */  --mini-snackbar-bg: #323232;
  --mini-snackbar-text: #ffffff;

  /* Action button colors */  --mini-snackbar-btn-text: #4caf50;
  --mini-snackbar-btn-bg: transparent;

  /* Shape properties */  --mini-snackbar-radius: 4px;
  --mini-snackbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* Typography */  --mini-snackbar-font-family: 'Roboto', sans-serif;

  /* Button interaction states */  --mini-snackbar-btn-radius: 4px;
  --mini-snackbar-btn-hover-opacity: 0.8;
  --mini-snackbar-btn-hover-outline: 2px solid var(--mini-snackbar-btn-text);
  --mini-snackbar-btn-outline-offset: 2px;
  --mini-snackbar-btn-focus-outline: 2px solid var(--mini-snackbar-btn-text);

  /* Animation timing */  --mini-snackbar-transition: transform 250ms ease-in-out;
}

/* Apply dark color scheme */:root {
  --mini-snackbar-bg: #1a1a1a;
  --mini-snackbar-text: #ffffff;
  --mini-snackbar-btn-text: #64b5f6;
}

/* Light theme */.light-theme {
  --mini-snackbar-bg: #ffffff;
  --mini-snackbar-text: #1a1a1a;
  --mini-snackbar-btn-text: #1976d2;
  --mini-snackbar-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

FAQs:

Q: How do I change the snackbar position from bottom center?
A: Override the CSS positioning properties on the .mini-snackbar class. For bottom-left positioning, set left: 30px and transform: translateY(100%) in the default state, then transform: translateY(0) in the show state. Remove the translateX(-50%) transforms that handle centering.

Q: Can I display multiple snackbars simultaneously on screen?
A: No. The library uses a single DOM element and queue system by design. Multiple simultaneous snackbars create poor UX by overwhelming users with information.

Q: Why doesn’t my action button handler execute?
A: Verify the handler is a function reference, not a function call. Write handler: myFunction not handler: myFunction(). The library validates the handler type and logs a warning if invalid.

Q: How do I prevent a snackbar from auto-hiding for critical messages?
A: Set an extremely high duration value like Snackbar.add('Critical message', null, 999999). Alternatively, call hideCurrent() only when the user explicitly dismisses the message through an action button. The library doesn’t provide a permanent display mode since persistent messages violate snackbar UX patterns.

The post Material Design Toast & Snackbar Library with Action Buttons – MiniSnackbar appeared first on CSS Script.