Fluxo UIFluxo UIv0.4.93

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 */}
    </>
  );
}
Manager defaults (overridable per call)
// Set app-wide defaults once; any showSnackbar() call can still override them
<SnackbarManager defaultOptions={{ variant: 'soft', size: 'sm', position: 'bottomRight' }} />

// Uses the manager defaults (soft, sm, bottomRight)
showSnackbar('Saved');

// Overrides size + position just for this call
showSnackbar('Upload failed', 'Error', { type: 'error', size: 'md', position: 'topCenter' });

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' });

Variants

Visual variants

Eight looks share the same API. Single-line variants (minimal, pill) drop the title for a shorter footprint.

soft — A gently tinted surface with a colored title and icon. The default.
solid — A bold filled card in the type color with white text.
outlined — A clean surface card framed by an accent ring.
gradient — A vivid diagonal fill in the type color with white text.
accent — A surface card topped with a bold colored bar.
glass — A frosted, translucent panel that blurs the backdrop.
minimal — A compact single-line chip — the shortest height.
pill — A rounded single-line badge in the solid type color.
showSnackbar('A new version is available.', 'Update', { variant: 'soft', type: 'info' });
showSnackbar('Your changes have been saved.', 'Saved', { variant: 'solid', type: 'success' });
showSnackbar('Storage is almost full.', 'Heads up', { variant: 'accent', type: 'warning' });
showSnackbar('Copied to clipboard', undefined, { variant: 'pill', type: 'success' });
showSnackbar('Reconnecting…', undefined, { variant: 'minimal', type: 'info' });

Sizes

Sizes

An orthogonal size scale. sm gives a noticeably shorter snackbar and combines with any variant.

Pair size: 'sm' with variant: 'minimal' for the most compact, shortest notification.
showSnackbar('Compact and short.', 'Small', { size: 'sm', variant: 'soft', type: 'info' });
showSnackbar('The default footprint.', 'Medium', { size: 'md', variant: 'soft', type: 'info' });
showSnackbar('Roomier for richer messages.', 'Large', { size: 'lg', variant: 'soft', 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,
});

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'"fade"

Entry and exit animation style.

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

Screen corner / edge where the snackbar appears.

variant
'soft' | 'solid' | 'outlined' | 'gradient' | 'accent' | 'glass' | 'minimal' | 'pill'"soft"

Visual look and feel. 'soft' is a tinted surface card with a colored icon/title; 'solid' a filled accent card with white text; 'outlined' a surface card framed by an accent ring; 'gradient' a vivid diagonal fill; 'accent' a surface card with a colored top bar; 'glass' a frosted translucent panel; 'minimal' and 'pill' are compact single-line styles that drop the title.

size
'sm' | 'md' | 'lg'"md"

Overall size. 'sm' yields a shorter, more compact snackbar; 'lg' a larger one. Works with any variant.

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.

<SnackbarManager />

defaultOptions
SnackbarOptions

Default options applied to every snackbar shown through this manager. Useful for setting an app-wide variant, size, position, or timeout in one place. Any option passed directly to showSnackbar() overrides the matching key here, which in turn overrides the library defaults.

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.

Eight Visual Variants

Switch the entire look and feel with one prop: soft, solid, outlined, gradient, accent, glass, plus compact minimal and pill styles.

Three Sizes

An orthogonal size scale (sm, md, lg) lets any variant be made shorter and more compact or roomier as needed.

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.

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.