Toast

Overview

Toasts display short-lived notification messages without interrupting the user's workflow. They are commonly used to communicate successful actions, warnings, errors, or general information.

MiniKit automatically creates toast containers, handles animations, manages stacking, and removes notifications after the configured duration.

Basic Usage

Display a notification using the show() function.

<button onclick="mk.toast('Your changes have been saved.')">Show Toast</button>

The first argument is the message. An optional title and configuration object can also be supplied.

Variants

Toasts support four built-in variants for communicating different message types.

<div class="hstack">
  <button onclick="mk.toast('Your changes have been saved.', 'Info')">
    Info
  </button>

  <button onclick="mk.toast('Profile updated successfully.', 'Success', { variant: 'success' })">
    Success
  </button>

  <button onclick="mk.toast('Your session will expire soon.', 'Warning', { variant: 'warning' })">
    Warning
  </button>

  <button onclick="mk.toast('Unable to save your changes.', 'Error', { variant: 'danger' })">
    Error
  </button>
</div>

Use variants consistently to communicate informational messages, successful actions, warnings, and errors.

Placement

Toasts can appear in six predefined positions on the screen using the placement option.

<div class="hstack wrap">
    <button onclick="mk.toast('Top Left', '', { placement: 'top-left' })">
      Top Left
    </button>

    <button onclick="mk.toast('Top Center', '', { placement: 'top-center' })">
      Top Center
    </button>

    <button onclick="mk.toast('Top Right', '', { placement: 'top-right' })">
      Top Right
    </button>

    <button onclick="mk.toast('Bottom Left', '', { placement: 'bottom-left' })">
      Bottom Left
    </button>

    <button onclick="mk.toast('Bottom Center', '', { placement: 'bottom-center' })">
      Bottom Center
    </button>

    <button onclick="mk.toast('Bottom Right', '', { placement: 'bottom-right' })">
      Bottom Right
    </button>
  </div>

Toasts are displayed in the top-right corner by default.

Close Button

Display a dismiss button by enabling the closeButton option.

<button onclick="mk.toast(
    'Your changes have been saved.',
    'Success',
    {
      variant: 'success',
      closeButton: true
    }
  )">
    Show Toast
  </button>

Clicking the close button immediately dismisses the notification without waiting for the configured duration.

Duration

Toasts automatically dismiss after four seconds by default. Customize this using the duration option, or set it to 0 to keep the notification visible until it is dismissed.

<div class="hstack">
    <button onclick="mk.toast(
      'Auto dismiss after 8 seconds.',
      'Success',
      {
        variant: 'success',
        duration: 8000
      }
    )">
      8 Seconds
    </button>

    <button onclick="mk.toast(
      'This notification will remain visible until dismissed.',
      'Persistent',
      {
        variant: 'info',
        duration: 0,
        closeButton: true
      }
    )">
      Persistent
    </button>
  </div>

Persistent toasts should provide a close button so users can dismiss them when they are no longer needed.

Accessibility

MiniKit automatically applies appropriate ARIA roles to generated toast notifications, allowing assistive technologies to announce them without interrupting the user's workflow.

• Informational, success, and warning toasts use role="status".
• Error notifications use role="alert" so they are announced immediately.
• Keep notification messages short and descriptive.
• Use persistent notifications only when user action is required.
• Provide a close button for persistent toasts so users can dismiss them.

API