Components · Feedback

Toast

A ToastProvider/useToast pair that queues transient notices, maps severity to the correct aria-live politeness (critical is assertive, info and caution are polite), and pauses its auto-dismiss timer on hover.

Live in all three modes

Day · Night-NVG · Mono: one component, re-themed through the token layer.

Day
Night-NVG
Mono

Variants & states

  • severity (info/caution/critical)
  • duration / sticky (0 disables auto-dismiss)
  • pause on hover

Tokens used

  • --semantic-color-surface-card
  • --semantic-color-status-caution
  • --semantic-color-status-critical
  • --semantic-color-action-primary

Copy-paste

import { ToastProvider, useToast } from 'operator-components';

function AckButton() {
  const { toast } = useToast();
  return (
    <button onClick={() => toast({ message: 'Link re-established.', severity: 'info' })}>
      Reconnect
    </button>
  );
}

Figma: library link coming soon. Gated until it's on sole-owned footing. (TODO: replace with the Community/library URL once published.)