Sadrazam – Snackbar Showcase

API Overview

The Snackbar class is a singleton toast notification manager exposed at Sadrazam.Snackbar

Main method Sadrazam.Snackbar.insert(message, time?)

message String or object with type keys. A plain string is treated as { info: [message] }

time Auto-dismiss duration in ms. Default: 5000. Set to false to disable auto-close.

Types success error warning notice (plain string defaults to unstyled info)

Help Sadrazam.Snackbar.help() — prints available configs to the console

// String shorthand (becomes info type)
sadrazam.Snackbar.insert('Hello world!');

// Object with typed messages
sadrazam.Snackbar.insert({
  success: 'Record saved successfully.',
  error: ['Field is required.', 'Invalid email address.']
});

// Custom duration (10 seconds)
sadrazam.Snackbar.insert('Slow toast', 10000);

// Persistent (no auto-dismiss)
sadrazam.Snackbar.insert('I stay until closed', false);

Snackbar Types

Each type applies a distinct color theme and icon via the CSS class on .snackbar__static-container

Success { success: 'Record saved.' }

Error { error: 'Something went wrong.' }

Warning { warning: 'Check your input.' }

Notice { notice: 'Scheduled maintenance tonight.' }

Plain String 'A simple text message'

// Success
sadrazam.Snackbar.insert({ success: 'Record saved successfully.' });

// Error
sadrazam.Snackbar.insert({ error: 'Something went wrong. Please try again.' });

// Warning
sadrazam.Snackbar.insert({ warning: 'Check your input before submitting.' });

// Notice
sadrazam.Snackbar.insert({ notice: 'Scheduled maintenance tonight at 11 PM.' });

// Plain string (no special styling)
sadrazam.Snackbar.insert('A simple text message');

Multiple Messages per Type

Pass an array of strings to show a bulleted list inside one type group

Error List { error: ['msg1', 'msg2', 'msg3'] }

Success List { success: ['msg1', 'msg2'] }

// Multiple error messages displayed as a bulleted list
sadrazam.Snackbar.insert({
  error: [
    'Name field is required.',
    'Email address is invalid.',
    'Password must be at least 8 characters.'
  ]
});

// Multiple success messages
sadrazam.Snackbar.insert({
  success: ['Profile updated.', 'Avatar uploaded.']
});

Mixed Types in One Call

A single insert() call can display multiple type groups stacked together

Success + Error { success: '...', error: ['...', '...'] }

All Four Types { success, error, warning, notice }

// Mixed: success + error in one notification
sadrazam.Snackbar.insert({
  success: '2 items imported successfully.',
  error: ['Row 5: missing email.', 'Row 12: duplicate entry.']
});

// All four types at once
sadrazam.Snackbar.insert({
  success: 'Settings saved.',
  warning: 'API rate limit is near 80%.',
  error: 'Failed to sync with remote server.',
  notice: 'New version available (v2.4.0).'
});

Duration & Auto-Dismiss

The second parameter controls how long the toast stays on screen (in milliseconds)

Default (5s) insert('...') // default 5000ms

Short (2s) insert('...', 2000)

Long (10s) insert('...', 10000)

Persistent insert('...', false)

// Default 5-second auto-dismiss
sadrazam.Snackbar.insert('Disappears in 5 seconds.');

// Quick 2-second flash
sadrazam.Snackbar.insert('Quick flash!', 2000);

// Longer 10-second display
sadrazam.Snackbar.insert('I will stay for 10 seconds.', 10000);

// Persistent: stays until the user clicks the close button
sadrazam.Snackbar.insert({ warning: 'This will not auto-close. Click X to dismiss.' }, false);

Singleton Behavior

Only one notification is visible at a time. Calling insert() again replaces the current toast immediately.

Replace Demo Click "First Toast" then quickly click "Replace with Second"

// First toast appears
sadrazam.Snackbar.insert({ notice: 'Loading data...' }, false);

// Calling insert() again replaces the previous one
sadrazam.Snackbar.insert({ success: 'Data loaded! Previous toast was replaced.' });

Close Button & Group Dismissal

Each type group has its own close button (ph-x icon). Closing all groups removes the wrapper entirely.

Try It Click the X on each group to close them individually

// Show three groups - close each one individually with the X button
sadrazam.Snackbar.insert({
  success: 'Upload complete.',
  warning: 'File size is large (48 MB).',
  error: 'Thumbnail generation failed.'
}, false);

Real-World Examples

Typical usage patterns you might encounter in production

Form Validation

Save Confirm

Delete Confirm

Import Report

// Form validation errors
sadrazam.Snackbar.insert({
  error: [
    'Name is required.',
    'Email format is invalid.',
    'Phone number must be 10 digits.',
    'Password and confirmation do not match.'
  ]
});

// Successful save
sadrazam.Snackbar.insert({ success: 'Record #1042 saved successfully.' }, 3000);

// CSV import results (mixed)
sadrazam.Snackbar.insert({
  success: ['120 rows imported.', '3 duplicates merged.'],
  warning: '5 rows skipped due to missing required fields.',
  error: ['Row 88: invalid date format.', 'Row 102: unknown category code.']
}, false);

Static (Inline) Notifications

The same CSS classes can be used as inline, static notifications within page content (without JS)

Your profile has been updated successfully.

Access denied. You do not have permission to view this page.

Your subscription expires in 3 days.
Please update your payment method.

A new software update is available. Version 3.2.1 includes bug fixes and performance improvements.

<!-- Static notification embedded in page (no JS needed) -->
<div class="snackbar__static-container snackbar__static-container--success">
  <ul class="snackbar__static-list">
    <li>Your profile has been updated.</li>
  </ul>
</div>

<!-- Multiple messages become a bulleted list -->
<div class="snackbar__static-container snackbar__static-container--warning">
  <ul class="snackbar__static-list">
    <li>Subscription expires in 3 days.</li>
    <li>Please update your payment method.</li>
  </ul>
</div>

Console Helper

Run Sadrazam.Snackbar.help() in your browser console to see all available configuration options

Try It Open DevTools console to see the output