Chakra UI toast queue management without native priority ordering

Priority Management in Chakra UI Toasts

Chakra UI's useToast hook does not provide a native configuration option for priority-based ordering. The system operates on a strict First-In-First-Out (FIFO) basis, where notifications are stacked chronologically regardless of their status or importance.

The Constraints of the Native API

While the id prop prevents duplicate notifications, it does not influence the visual position of the toast in the stack. Furthermore, the toast container cannot dynamically reorder existing instances without triggering the internal exit and entry animation logic. Because the internal state is managed privately within the ToastProvider, there is no public API to shift a low-priority toast below a high-priority one once it has been mounted.

Implementing a Priority Queue Workaround

To achieve priority ordering, you must decouple the event trigger from the toast dispatch. Instead of calling toast() directly from your business logic, route all notifications through a custom manager that handles the queue logic before calling the Chakra hook.

1. Define Priority Levels: Create a mapping for your notification types (e.g., CRITICAL: 0, INFO: 1, SUCCESS: 2).
2. Buffer High-Frequency Events: Use a short delay (e.g., 50–100ms) to collect concurrent events into a local array.
3. Sort and Dispatch: Sort the buffered array by priority level and then dispatch them to useToast in the desired visual order (lowest priority first, so the highest priority ends up at the top of the stack).

// Conceptual implementation of a priority dispatcher
const dispatchPriorityToasts = (events) => {
  const sorted = [...events].sort((a, b) => b.priority - a.priority);
  
  sorted.forEach(event => {
    toast({
      title: event.title,
      status: event.status,
      id: event.id,
      // Higher priority events dispatched last to appear on top
    });
  });
};

Assumptions and Limitations

This approach assumes you are using Chakra UI v2.x. It is important to note that this method only controls the order of initial dispatch. It cannot move a toast that is already visible on the screen. Attempting to manually manipulate the DOM order of toasts will likely break the framer-motion animations used by Chakra UI, leading to abrupt visual jumps or orphaned elements.

Diagnostic Detail Needed: Are you attempting to reorder toasts that are already visible, or only those arriving in a high-frequency burst?