TkxToast

Click a button to fire a toast (top-right by default)

import { TkxToastProvider, useToast } from 'tekivex-ui';

// 1. Mount the provider once at app root
<TkxToastProvider position="top-right">
  <App />
</TkxToastProvider>

// 2. Trigger from anywhere
function SaveButton() {
  const toast = useToast();
  return (
    <TkxButton
      onClick={async () => {
        await save();
        toast({ variant: 'success', title: 'Saved', description: 'Your changes are live.' });
      }}
    >
      Save
    </TkxButton>
  );
}

Variants

toast({ variant: 'default', title: 'Plain notification' });
toast({ variant: 'success', title: 'Saved' });
toast({ variant: 'warning', title: 'Disk space low' });
toast({ variant: 'danger',  title: 'Connection lost' });

Position

TkxToastProvider accepts a single position prop that applies to every toast it shows:

<TkxToastProvider position="top-right">     {/* default */}
<TkxToastProvider position="top-left">
<TkxToastProvider position="top-center">
<TkxToastProvider position="bottom-right">
<TkxToastProvider position="bottom-left">
<TkxToastProvider position="bottom-center">

Auto-dismiss

toast({ title: 'Saved', duration: 4000 }); // ms; default 4000
toast({ title: 'Read me', duration: Infinity }); // never auto-dismiss

The countdown pauses while the user hovers or focuses the toast.

With action

toast({
  variant: 'success',
  title: 'Item deleted',
  action: {
    label: 'Undo',
    onClick: () => restore(),
  },
});

Accessibility

The portal mounts at <body> end with aria-label="Notifications" (localised) and role="region".
Each toast is a live region — role="status" for info/success, role="alert" for danger so it announces immediately.
Dismiss button has localised aria-label.
Auto-dismiss respects prefers-reduced-motion — animations are skipped but the timer still runs.

API

const toast = useToast();
toast({
  variant: 'default' | 'success' | 'warning' | 'danger';
  title: string;
  description?: string;
  duration?: number;       // ms; default 4000; Infinity for sticky
  action?: { label: string; onClick: () => void };
}): string;                // returns id

toast.dismiss(id?: string);  // dismiss specific or all

Source

src/components/TkxToast.tsx