Toast pause on hover is defined by the pauseOnHover option.
<button class="kt-btn kt-btn-outline" id="toast_pause_on_hover"> Show Toast</button>
Accessibility
<button class="kt-btn kt-btn-outline" id="toast_accessibility"> Show Toast</button>
Action & Cancel
Toast action and cancel is defined by the action and cancel options.
<button class="kt-btn kt-btn-outline" id="toast_action_cancel"> Show Toast</button>
Global Config
Toast global config is defined by the globalConfig option.
<button class="kt-btn kt-btn-outline" id="toast_global_config"> Show Toast</button>
Custom Content
Toast custom content is defined by the content option.
<button class="kt-btn kt-btn-outline" id="toast_custom_content"> Show Toast</button>
Custom Duration
Toast custom duration is defined by the duration option.
<button class="kt-btn kt-btn-outline" id="toast_custom_duration"> Show Toast</button>
Component API
Options
These options allow you to configure Toasts programmatically or via initialization. All options can be passed to the KTToast.show(options) method or set as defaults via configuration.
Option
Type
Default
Description
message
string | HTMLElement | () => HTMLElement
Main message or content of the toast.
content
KTToastAction
Property
Type
Default
Description
label
string
Button label text.
onClick
(id: string) => void
KTToastClassNames
Override internal class names for headless usage.
Property
Type
Description
container
string
Toast container (positioned wrapper)
toast
string
Main toast element
Methods
Use the KTToast API to programmatically show, hide, or clear toasts.
Method
Description
KTToast.show(options)
Shows a toast with the given options. Returns a toast instance with a dismiss() method.
KTToast.hide(idOrInstance)
Hides a toast by id or instance.
KTToast.clearAll()
Removes all toasts from the screen.
Example
// Show a toastconst toast = KTToast.show({ message: 'Profile saved', variant: 'success', duration: 3000, action: { label: 'Undo', onClick: (id) => { console.log('Undo clicked', id); } }});// Hide a toastKTToast.hide(toast.id);// Clear all toastsKTToast.clearAll();
Utilities
KTToast provides static methods for global management:
Method
Description
KTToast.init()
Initializes KTToast for all elements. (No-op for programmatic usage)
KTToast.clearAll()
Removes all toasts from the screen.
Events
KTToast dispatches custom events on toast elements: