Fluxo UIFluxo UIv0.4.1

Snackbar

Global toast notifications for feedback messages. Mount <SnackbarManager /> once at your app root, then call showSnackbar() from anywhere.

Setup

App root
import { SnackbarManager } from 'fluxo-ui';

function App() {
  return (
    <>
      <SnackbarManager />
      {/* rest of app */}
    </>
  );
}

Types

Notification types

Four semantic types with distinct colors and icons.

showSnackbar('File uploaded successfully.', 'Success', { type: 'success' });
showSnackbar('Disk usage is high.', 'Warning', { type: 'warning' });
showSnackbar('Connection failed.', 'Error', { type: 'error' });
showSnackbar('3 new messages arrived.', 'Info', { type: 'info' });

Positions

Screen positions

Click a position to see the snackbar appear there.

showSnackbar('Saved!', 'Success', { type: 'success', position: 'topRight' });

Animations

Entry animations

Each snackbar supports different entry/exit animations.

showSnackbar('Done!', 'Success', { type: 'success', animation: 'bounce' });

Persistent & Custom Timeout

Timeout control

Set timeout to 0 for a persistent snackbar that only dismisses manually.

showSnackbar('Critical error occurred.', 'Error', {
  type: 'error',
  timeout: 0,
  showCloseButton: true,
});

Light Background Variant

Light background

Use lightBg for a softer appearance on light-themed UIs.

showSnackbar('Saved successfully.', 'Success', {
  type: 'success',
  lightBg: true,
});

With Click Callback

Clickable snackbar

Attach onClick to handle user interaction (e.g., navigate to details).

showSnackbar('3 new messages received. Click to view.', 'Messages', {
  type: 'info',
  timeout: 6000,
  onClick: () => navigate('/messages'),
  onClose: (manual) => console.log('closed by user:', manual),
});

Import

import { SnackbarManager, showSnackbar } from 'fluxo-ui';

API Reference

showSnackbar(message, title, options?)

type
'info' | 'success' | 'warning' | 'error'"info"

Determines the color scheme and default icon of the snackbar.

timeout
number"4000"

Auto-dismiss delay in milliseconds. Set to 0 to disable auto-dismiss.

animation
'fade' | 'slide' | 'zoom' | 'bounce'"slide"

Entry and exit animation style.

position
'topLeft' | 'topCenter' | 'topRight' | 'bottomLeft' | 'bottomCenter' | 'bottomRight'"bottomRight"

Screen corner / edge where the snackbar appears.

showCloseButton
boolean"true"

Whether to render the dismiss (\u00d7) button.

onClick
() => void

Callback fired when the user clicks the snackbar body.

onClose
(manual: boolean) => void

Callback fired when the snackbar closes. manual is true when closed by the user.

customIcon
SVGIcon

Override the default type icon with a custom SVG icon component.

lightBg
boolean"false"

Use a light background variant instead of the default colored background.

Features

Global Manager Pattern

Mount SnackbarManager once at the app root and trigger notifications from anywhere in the codebase with showSnackbar().

Four Semantic Types

Info, success, warning, and error variants each carry a distinct color scheme and icon to communicate intent clearly.

Six Screen Positions

Place notifications at any of six positions: top-left, top-center, top-right, bottom-left, bottom-center, or bottom-right.

Four Animations

Choose from slide, fade, zoom, or bounce entry/exit animations to match your application style.

Auto-Dismiss & Persistent

Configurable auto-dismiss timeout in milliseconds. Set timeout to 0 for persistent notifications that only close manually.

Light Background Variant

The lightBg option renders a softer tinted background for a subtler appearance on light-themed interfaces.

Click & Close Callbacks

Attach onClick to navigate or take action when the user taps the notification, and onClose to react to dismissal events.

Custom Icons

Override the default type icon with any custom SVG icon component for branded or context-specific notifications.

Theming

Full dark/light mode and all 5 brand themes supported automatically via CSS custom properties.