MESSAGING

Snackbar

Draft

A brief, auto-dismissing notification that appears at the bottom of the screen to confirm an action.

Usage

✓Changes saved successfully

Common alternative names

Brief notification, Auto-dismiss toast

---

Anatomy

A snackbar is a compact dark-themed notification made up of a container, a message, and optional leading content and action button.

Container
(Required)

✓

Changes saved successfully

Icon / photo / progress spinner
(Optional)

Message
(Required)

Medium tertiary button
(Optional)

Leading content

The leading content slot supports three configurations, each at a specific size.

✓Message text

Custom icon

Size: 24. A custom icon to reinforce the message context, such as a checkmark for success.

Message text

Progress circle

Size: 24. A spinning progress indicator for in-progress operations like uploads or syncs.

Message text

Custom photo

Size: 48. A photo thumbnail for content-specific notifications, such as a saved image or contact.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { Snackbar, useSnackbar } from '@arch-ui/components';

function SaveButton() {
  const { enqueue } = useSnackbar();

  return (
    <Button onClick={() => {
      save();
      enqueue({ message: 'Changes saved' });
    }}>
      Save
    </Button>
  );
}

With action

Snackbars can include a single text action for undoing or following up.

enqueue({
  message: 'Item archived',
  actionText: 'Undo',
  onAction: handleUndo,
});

---

Duration

By default snackbars auto-dismiss after a short delay. Override the duration or make them persist until manually dismissed.

// Custom duration (milliseconds)
enqueue({ message: 'Uploading...', duration: 8000 });

// Persistent until dismissed
enqueue({ message: 'No internet connection', duration: 0 });

---

Expected props

SnackbarProviderProps

Prop	Type	Default	Description
placement	'bottom-left' | 'bottom-center' | 'bottom-right'	'bottom-center'	Where snackbars appear on screen.
children	ReactNode	required	App content.

---

SnackbarOptions (passed to enqueue)

Prop	Type	Default	Description
message	string	required	The notification text.
actionText	string	--	Label for an optional inline action.
onAction	() => void	--	Callback when the action is clicked.
duration	number	4000	Auto-dismiss delay in milliseconds. Pass 0 to persist.

---

Snackbar vs Toast

	Snackbar	Toast
Position	Bottom of screen	Configurable (top/bottom, left/center/right)
Severity	Neutral only	Supports success, warning, danger variants
Content	Single line + optional action	Title + description + close button
Use case	Lightweight action confirmation	Important status updates

---

Accessibility

• The snackbar container should use role="status" and aria-live="polite" so screen readers announce new messages without interrupting.
• Action buttons within the snackbar must be keyboard focusable.
• Auto-dismiss timers should pause when the snackbar receives focus or hover, giving users time to read or interact.
• Avoid showing more than one snackbar at a time to reduce cognitive load.