TkxToast

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

// Wrap your app once
<TkxToastProvider position="top-right">
  <App />
</TkxToastProvider>

// Then fire toasts imperatively from any descendant
function SaveButton() {
  const { toast } = useToast();
  return (
    <TkxButton onClick={() =>
      toast({ title: 'Saved', variant: 'success' })
    }>
      Save
    </TkxButton>
  );
}

Live demo

4 variants

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

SuccessInfoWarningDanger

Accessibility

• Toasts render with role="status" + aria-live="polite"
• Errors use role="alert" + aria-live="assertive"
• Dismiss button is keyboard-reachable
• Respects prefers-reduced-motion (no slide animation when set)

Source

src/components/TkxToast.tsx

For the full interactive sandbox, open the playground.