KTUIKTUI
KTUIKTUI
ComponentsDocsStudio

Getting Started

IntroductionInstallationApproachThemingJavaScriptDark modeRTLReferencesChangelog - v1.1.1Metronic TemplatePopular

Components

AccordionAvatarAlertBadgeBreadcrumbButtonCardCheckboxCollapseDatatableDatepickerSoonDismissDrawerDropdownImage InputInputUpdateKbdLinkModalPaginationProgressRadio GroupReparentScrollableScrollspyUpdateScrolltoSelectSeparatorSkeletonStepperStickySwitchTabsTextareaTheme SwitchToastNewTooltipToggleToggle GroupToggle PasswordTooltip
©2025 KtUI. All rights reserved.
A project by Keenthemes
Docs
Toast

Toast

Toasts are lightweight notifications designed to communicate ideas with minimal visual noise.

Examples

Basic Usage

Click the below toggle button to reveal the default toast example.

<button class="kt-btn kt-btn-outline" id="toast_btn">Show Toast</button>

Variants

Toast variants are defined by the variant option.

<div class="flex items-center h-full w-full flex-wrap gap-4">
  <div class="flex flex-col gap-4">
    <button
      class="kt-btn kt-btn-outline text-primary"
      id="toast_variant_primary"
    >
      Primary<!-- -->
      Toast</button
    ><button
      class="kt-btn kt-btn-outline text-green-500"
      id="toast_variant_success"
    >
      Success<!-- -->
      Toast</button
    ><button
      class="kt-btn kt-btn-outline text-yellow-500"
      id="toast_variant_warning"
    >
      Warning<!-- -->
      Toast</button
    ><button
      class="kt-btn kt-btn-outline text-destructive"
      id="toast_variant_destructive"
    >
      Destructive<!-- -->
      Toast</button
    ><button
      class="kt-btn kt-btn-outline text-violet-500"
      id="toast_variant_info"
    >
      Info<!-- -->
      Toast</button
    ><button class="kt-btn kt-btn-outline text-mono" id="toast_variant_mono">
      Mono<!-- -->
      Toast</button
    ><button
      class="kt-btn kt-btn-outline text-muted-foreground"
      id="toast_variant_secondary"
    >
      Secondary<!-- -->
      Toast
    </button>
  </div>
</div>

Appearance

Toast appearance is defined by the appearance option.

<div class="flex flex-col gap-2.5 items-start">
  <div class="flex items-center gap-2.5">
    <label class="kt-form-label w-40">Appearance</label>
    <div class="kt-toggle-group" id="appearanceToggleGroup">
      <label class="kt-btn"
        ><input
          type="radio"
          name="appearance"
          checked=""
          value="solid"
        />Solid</label
      ><label class="kt-btn"
        ><input type="radio" name="appearance" value="outline" />Outline</label
      ><label class="kt-btn"
        ><input type="radio" name="appearance" value="light" />Light</label
      >
    </div>
  </div>
  <div class="flex items-center gap-2.5">
    <label class="kt-form-label w-40">Variant</label>
    <div class="kt-toggle-group" id="variantToggleGroup">
      <label class="kt-btn"
        ><input type="radio" name="variant" checked="" value="primary" /><span
          class="text-primary"
          >Primary</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="success" /><span
          class="text-green-500"
          >Success</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="warning" /><span
          class="text-yellow-500"
          >Warning</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="destructive" /><span
          class="text-destructive"
          >Destructive</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="info" /><span
          class="text-violet-500"
          >Info</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="mono" /><span
          class="text-mono"
          >Mono</span
        ></label
      ><label class="kt-btn"
        ><input type="radio" name="variant" value="secondary" /><span
          class="text-muted-foreground"
          >Secondary</span
        ></label
      >
    </div>
  </div>
  <button class="kt-btn kt-btn-primary" id="toast_demo">Show Toast</button>
</div>

Position

Toast position is defined by the position option.

<div class="flex items-center justify-center grow w-full">
  <div class="flex flex-col items-center gap-4 pt-20">
    <button class="kt-btn kt-btn-outline" id="toast_position_top-end">
      Top-end</button
    ><button class="kt-btn kt-btn-outline" id="toast_position_top-center">
      Top-center</button
    ><button class="kt-btn kt-btn-outline" id="toast_position_top-start">
      Top-start</button
    ><button class="kt-btn kt-btn-outline" id="toast_position_bottom-end">
      Bottom-end</button
    ><button class="kt-btn kt-btn-outline" id="toast_position_bottom-center">
      Bottom-center</button
    ><button class="kt-btn kt-btn-outline" id="toast_position_bottom-start">
      Bottom-start
    </button>
  </div>
</div>

Size

Toast size is defined by the size option.

<div class="flex gap-2.5">
  <button class="kt-btn kt-btn-outline" id="toast_size_sm">
    Size -
    <!-- -->Small</button
  ><button class="kt-btn kt-btn-outline" id="toast_size_md">
    Size -
    <!-- -->Medium</button
  ><button class="kt-btn kt-btn-outline" id="toast_size_lg">
    Size -
    <!-- -->Large
  </button>
</div>

Icon

Toast icon is defined by the icon option.

<button class="kt-btn kt-btn-outline" id="toast_icon">Show Toast</button>

Beep

Toast beep is defined by the beep option.

<button class="kt-btn kt-btn-outline" id="toast_beep">Show Toast</button>

Progress

Toast progress is defined by the progress option.

<button class="kt-btn kt-btn-outline" id="toast_progress">Show Toast</button>

Important

Toast important is defined by the important option.

<button class="kt-btn kt-btn-outline" id="toast_important">Show Toast</button>

Max Toasts

Toast max toasts is defined by the maxToasts option.

<button class="kt-btn kt-btn-outline" id="toast_max_toasts">Show Toast</button>

Offset and Gap

Toast offset and gap is defined by the offset and gap options.

<button class="kt-btn kt-btn-outline" id="toast_offset_gap">Show Toast</button>

Pause on Hover

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.

OptionTypeDefaultDescription
messagestring | HTMLElement | () => HTMLElementMain message or content of the toast.
contentHTMLElement | () => HTMLElement | stringCustom content for the toast. If set, replaces all default markup.
variant'info' | 'success' | 'error' | 'warning' | 'primary' | 'secondary' | 'destructive' | 'mono''primary'Visual style variant.
appearance'solid' | 'outline' | 'light''solid'Toast appearance style.
size'sm' | 'md' | 'lg''md'Toast size.
iconstring | booleanOptional icon HTML or SVG.
progressbooleanfalseShow a progress indicator.
durationnumber4000Duration in milliseconds before auto-dismiss.
importantbooleanfalsePrevent auto-dismiss if true.
actionKTToastAction | boolean{ label: 'Ok', ... }Primary action button.
cancelKTToastAction | boolean{ label: 'Cancel', ... }Secondary/cancel action button.
dismissbooleantrueShow close button.
position'top-end' | 'top-center' | 'top-start' | 'bottom-end' | 'bottom-center' | 'bottom-start''top-end'Position of the toast container.
maxToastsnumber5Maximum number of toasts visible at once.
offsetnumber15Vertical offset from screen edge (px).
gapnumber10Gap between stacked toasts (px).
classNamestring''Custom class for the toast.
classNamesPartial<KTToastClassNames>Override internal class names for headless usage.
rolestringARIA role.
idstringCustom toast id.
onAutoClose(id: string) => voidCallback when auto-dismiss fires.
onDismiss(id: string) => voidCallback when toast is dismissed.

KTToastAction

PropertyTypeDefaultDescription
labelstringButton label text.
onClick(id: string) => voidCallback when clicked. Receives toast id.
classNamestringCustom class for the button.

KTToastClassNames

Override internal class names for headless usage.

PropertyTypeDescription
containerstringToast container (positioned wrapper)
toaststringMain toast element
iconstringIcon element
messagestringMessage element
progressstringProgress bar
actionstringAction button
cancelstringCancel button

Methods

Use the KTToast API to programmatically show, hide, or clear toasts.

MethodDescription
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.
KTToast.update(container, offset)Repositions all toasts in the container.
KTToast.config(options)Sets global toast config defaults.

Example

// Show a toast
const toast = KTToast.show({
  message: 'Profile saved',
  variant: 'success',
  duration: 3000,
  action: {
    label: 'Undo',
    onClick: (id) => {
      console.log('Undo clicked', id);
    }
  }
});
 
// Hide a toast
KTToast.hide(toast.id);
 
// Clear all toasts
KTToast.clearAll();

Utilities

KTToast provides static methods for global management:

MethodDescription
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:

EventDescription
kt.toast.showFired immediately before a toast is shown.
kt.toast.shownFired immediately after a toast is shown.
kt.toast.hideFired immediately before a toast is hidden.
kt.toast.hiddenFired immediately after a toast is hidden.

Example

const toast = KTToast.show({ message: 'Event example' });
toast.element.addEventListener('kt.toast.shown', (e) => {
  console.log('Toast shown', e.detail);
});

Accessibility

  • Toasts use ARIA roles for accessibility.
  • Use the role option to set a custom ARIA role (e.g. status or alert).
  • All buttons have accessible labels.

Toasts are fully programmatic. There are no data attributes for auto-initialization. Use the KTToast.show() API to display toasts.

Selectors

This table details the custom classes and data attributes used by the toast component.

Selector / AttributeDescription
data-kt-toast-dismiss="true"Button or element that dismisses the toast when clicked.
data-kt-toast-action="true"Button or element for the primary action.
data-kt-toast-cancel="true"Button or element for the cancel/secondary action.
PreviouseTheme SwitchNextTooltip

On This Page

  • Examples
    • Basic Usage
    • Variants
    • Appearance
    • Position
    • Size
    • Icon
    • Beep
    • Progress
    • Important
    • Max Toasts
    • Offset and Gap
    • Pause on Hover
    • Accessibility
    • Action & Cancel
    • Global Config
    • Custom Content
    • Custom Duration
  • Component API
    • Options
    • Methods
    • Utilities
    • Events
    • Accessibility
    • Selectors