Toast

Toasts stack from the corner with a tone well, lifetime bar, and dismiss control. Tones: default, success, danger, warning, and info. Reduced motion softens entrance and freezes the lifetime bar.

Usage

import { Button, ToastProvider, useToast } from "@komponents/ui";

function Notify() {
  const { toast } = useToast();
  return (
    <Button
      onPress={() =>
        toast({ title: "Draft saved", tone: "success" })
      }
    >
      Notify
    </Button>
  );
}

Wrap the app with ToastProvider once — already included in the docs shell.

Tones

Accessibility

• danger toasts render role="alert" with aria-live="assertive"; every other tone uses role="status" with aria-live="polite", so routine confirmations never interrupt
• The dismiss control is a real button labelled "Dismiss notification"
• The countdown bar is aria-hidden and freezes when motion is off
• Toasts auto-dismiss after 4200ms by default. Raise duration for longer messages, and do not put an action's only affordance inside a toast — the timer does not pause on hover or focus.