children?ReactNodeportalRef?RefObject<HTMLElement | null>nullposition?'fixed'|'absolute''fixed'| Prop | Type | Default |
|---|---|---|
children? | ReactNode | - |
portalRef? | RefObject<HTMLElement | null> | null |
position? | 'fixed'|'absolute' | 'fixed' |
open(tone: Status, message: string, options?: ToastOptions) => voidclose(id: string) => voidcloseAll() => void| Prop | Type | Default |
|---|---|---|
open | (tone: Status, message: string, options?: ToastOptions) => void | - |
close | (id: string) => void | - |
closeAll | () => void | - |
import { ToastProvider, useToast } from '@k8ordo/ui';<ToastProvider>
<ToastDemo />
</ToastProvider>
function ToastDemo() {
const { open } = useToast();
return (
<div className="flex flex-wrap gap-2">
<Button onClick={() => open('success', 'Operation completed')}>
Success
</Button>
<Button onClick={() => open('info', 'Here is some information')}>
Info
</Button>
<Button onClick={() => open('warning', 'Please check your input')}>
Warning
</Button>
<Button onClick={() => open('error', 'Something went wrong')}>
Error
</Button>
</div>
);
}const { open, close, closeAll } = useToast();
// Show a toast
open('success', 'Saved successfully');
// Close a specific toast by ID
close(toastId);
// Close all toasts
closeAll();function CloseAllDemo() {
const { open, closeAll } = useToast();
return (
<div className="flex flex-wrap gap-2">
<Button onClick={() => open('info', 'Notification 1')}>
Add Toast
</Button>
<Button onClick={() => open('success', 'Notification 2')}>
Add Another
</Button>
<Button onClick={closeAll}>Close All</Button>
</div>
);
}