Toast

Docs

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.

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.

Beep

Toast beep is defined by the beep option.

Progress

Toast progress is defined by the progress option.

Important

Toast important is defined by the important option.

Max Toasts

Toast max toasts is defined by the maxToasts option.

Offset and Gap

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

Pause on Hover

Toast pause on hover is defined by the pauseOnHover option.

Accessibility

Action & Cancel

Toast action and cancel is defined by the action and cancel options.

Global Config

Toast global config is defined by the globalConfig option.

Custom Content

Toast custom content is defined by the content option.

Custom Duration

Toast custom duration is defined by the duration option.

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

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:

Event	Description
`kt.toast.show`	Fired immediately before a toast is shown.
`kt.toast.shown`	Fired immediately after a toast is shown.
`kt.toast.hide`	Fired immediately before 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 / Attribute	Description
`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 Switch NextTooltip