UI: Components

SnackBar

Snackbar is a web component, inspired by Material Design, behaving like a customizable notification system, that can display messages in different positions with various styles.

<snack-bar position="bottom right"></snack-bar>

Behavior

Light dismiss (default)

<snack-bar></snack-bar>

Click outside to dismiss
Press Escape to dismiss
Auto-dismisses after duration (default: 3000ms)

Persistent with close button

<snack-bar popover="manual"></snack-bar>

Close button appears
No light dismiss
Stays open until closed

Persistent message

snackbar.add('Message', 'info', 0);

Message stays open until closed
Does not auto-dismiss
Same behavior as popover="manual"

This can also be set manually in HTML:

<snack-item message="Message" part="info" duration="0">

Styling

Built-in types:

info
success
warning
error

<snack-item part="info"></snack-item>

Custom styling

Custom styling can be applied using CSS custom properties.

snack-bar::part(custom-error) {
  --snack-item-bg: #f44336;    // background
  --snack-item-c: #ffffff;     // color
  --snack-item-ac: lightcoral; // action
}

Usage

<snack-item part="custom-error"></snack-item>

Note: snack items use exportparts, so these custom properties can be applied to the snack bar itself.