Toast · Panel

Icon

Toast icon is defined by the icon option.

const btn = document.getElementById('toast_icon');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This is a toast with an icon!',
				icon: '<svg viewBox="0 0 24 24" class="text-green-500" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
			});
		});
	}

Beep

Toast beep is defined by the beep option.

const btn = document.getElementById('toast_beep');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				beep: true,
				message: 'This is a toast with an icon!',
				icon: '<svg viewBox="0 0 24 24" class="text-green-500" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
			});
		});
	}

Progress

Toast progress is defined by the progress option.

const btn = document.getElementById('toast_progress');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This toast has a progress bar!',
				progress: true,
			});
		});
	}

Important

Toast important is defined by the important option.

const btn = document.getElementById('toast_important');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This toast will not auto-dismiss!',
				important: true,
			});
		});
	}

Max Toasts

Toast max toasts is defined by the maxToasts option.

const btn = document.getElementById('toast_max_toasts');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This is a toast! Try spamming this button to hit the max.',
				maxToasts: 3,
			});
		});
	}

Offset and Gap

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

  MVToast.config({
    offset: 40,
    gap: 24,
  });

  const btn = document.getElementById('toast_offset_gap');
  if (btn) {
    btn.addEventListener('click', function () {
      MVToast.show({
        message: 'This toast uses offset and gap!',
      });
    });
  }

Pause on Hover

Toast pause on hover is defined by the pauseOnHover option.

const btn = document.getElementById('toast_pause_on_hover');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'Progress pauses on hover!',
				progress: true,
				pauseOnHover: true,
			});
		});
	}

Accessibility

const btn = document.getElementById('toast_accessibility');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This toast uses role="alert" for accessibility.',
				role: 'alert',
			});
		});
	}

Action & Cancel

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

const btn = document.getElementById('toast_action_cancel');
  if (btn) {
    btn.addEventListener('click', function () {
      MVToast.show({
        classNames: {
          toast: 'w-96',
        },
        icon: '<svg viewBox="0 0 24 24" class="text-green-500" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>',
        message: 'Toast with action and cancel!',
        action: {
          label: 'Undo',
          className: 'mv-link mv-link-underlined',
          onClick: function () {
            alert('Undo clicked!');
          },
        },
        cancel: {
          label: 'Dismiss',
          className: 'mv-link mv-link-underlined',
          onClick: function () {
            alert('Dismiss clicked!');
          },
        },
      });
    });
  }

Global Config

Toast global config is defined by the globalConfig option.

const btn = document.getElementById('toast_global_config');
  if (btn) {
    btn.addEventListener('click', function () {
      // Set global config before showing toast
      MVToast.config({
        appearance: 'outline',
        variant: 'info',
        duration: 8000,
        progress: true,
        pauseOnHover: true,
      });
      MVToast.show({
        message: 'This toast uses global config (outline, info, 8s)!',
      });
    });
  }

Custom Content

Toast custom content is defined by the content option.

  const btn = document.getElementById('toast_custom_content');
  if (btn) {
    btn.addEventListener('click', function () {
      MVToast.show({
        classNames: {
          toast: 'w-96 border border-border bg-background',
        },
        content: `
          <div class="flex items-center justify-between gap-2.5">
            <div class="flex -space-x-2">
              <div class="mv-avatar size-7">
                <div class="mv-avatar-image border-2 border-background hover:z-10">
                  <img src="/media/avatars/2.png" alt="avatar" />
                </div>
              </div>
              <div class="mv-avatar size-7">
                <div class="mv-avatar-image border-2 border-background hover:z-10">
                  <img src="/media/avatars/4.png" alt="avatar" />
                </div>
              </div>
              <div class="mv-avatar size-7">
                <div class="mv-avatar-image border-2 border-background hover:z-10">
                  <img src="/media/avatars/6.png" alt="avatar" />
                </div>
              </div>
              <div class="mv-avatar size-7">
                <div class="mv-avatar-image border-2 border-background hover:z-10">
                  <img src="/media/avatars/8.png" alt="avatar" />
                </div>
              </div>
            </div>

            <p class="text-xs text-muted-foreground me-1.5">
              <span class="font-semibold text-foreground">120K+</span> users are using <a target="_blank" class="mv-link mv-link-underlined" href="https://maverickui.com">PulseCore</a>.
            </p>
          </div>
          `,
      });
    });
  }

Custom Duration

Toast custom duration is defined by the duration option.

const btn = document.getElementById('toast_custom_duration');
	if (btn) {
		btn.addEventListener('click', function () {
			MVToast.show({
				message: 'This toast will stay for 10 seconds!',
				duration: 10000,
			});
		});
	}

Basic Usage

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

const btn = document.querySelector('#toast_btn');
if (btn) {
  btn.addEventListener('click', () => {
    MVToast.show({
      message: 'This is a basic toast!',
    });
  });
}

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="mv-btn mv-btn-outline text-primary"
      id="toast_variant_primary"
    >
      Primary<!-- -->
      Toast</button
    ><button
      class="mv-btn mv-btn-outline text-green-500"
      id="toast_variant_success"
    >
      Success<!-- -->
      Toast</button
    ><button
      class="mv-btn mv-btn-outline text-yellow-500"
      id="toast_variant_warning"
    >
      Warning<!-- -->
      Toast</button
    ><button
      class="mv-btn mv-btn-outline text-destructive"
      id="toast_variant_destructive"
    >
      Destructive<!-- -->
      Toast</button
    ><button
      class="mv-btn mv-btn-outline text-violet-500"
      id="toast_variant_info"
    >
      Info<!-- -->
      Toast</button
    ><button class="mv-btn mv-btn-outline text-mono" id="toast_variant_mono">
      Mono<!-- -->
      Toast</button
    ><button
      class="mv-btn mv-btn-outline text-muted-foreground"
      id="toast_variant_secondary"
    >
      Secondary<!-- -->
      Toast
    </button>
  </div>
</div>

const variants = [
  'primary',
  'success',
  'warning',
  'destructive',
  'info',
  'mono',
  'secondary',
];
variants.forEach((variant) => {
  const btn = document.getElementById(`toast_variant_${variant}`);
  if (btn) {
    btn.addEventListener('click', () => {
      MVToast.show({
        message: `This is a ${variant} toast!`,
        variant,
      });
    });
  }
});

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


  const appearances = ['solid', 'outline'];
  const variants = [
    'primary',
    'success',
    'warning',
    'destructive',
    'info',
    'mono',
    'secondary',
  ];

  const appearanceToggleGroup = document.querySelector(
    '#appearanceToggleGroup',
  );
  const variantToggleGroup = document.querySelector('#variantToggleGroup');
  const demoButton = document.getElementById('toast_demo');

  let selectedAppearance = appearances[0];
  let selectedVariant = variants[0];

  const appearanceRadios = appearanceToggleGroup.querySelectorAll(
    'input[type="radio"]',
  );
  const variantRadios = variantToggleGroup.querySelectorAll(
    'input[type="radio"]',
  );

  appearanceRadios.forEach((radio) => {
    radio.addEventListener('change', (e) => {
      if (e.target.checked) {
        selectedAppearance = e.target.value;
      }
    });
  });

  variantRadios.forEach((radio) => {
    radio.addEventListener('change', (e) => {
      if (e.target.checked) {
        selectedVariant = e.target.value;
      }
    });
  });

  demoButton.addEventListener('click', () => {
    MVToast.show({
      icon: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-info-icon lucide-info"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>`,
      message: `Appearance: ${selectedAppearance}, Variant: ${selectedVariant}`,
      appearance: selectedAppearance,
      variant: selectedVariant,
    });
  });

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="mv-btn mv-btn-outline" id="toast_position_top-end">
      Top-end</button
    ><button class="mv-btn mv-btn-outline" id="toast_position_top-center">
      Top-center</button
    ><button class="mv-btn mv-btn-outline" id="toast_position_top-start">
      Top-start</button
    ><button class="mv-btn mv-btn-outline" id="toast_position_bottom-end">
      Bottom-end</button
    ><button class="mv-btn mv-btn-outline" id="toast_position_bottom-center">
      Bottom-center</button
    ><button class="mv-btn mv-btn-outline" id="toast_position_bottom-start">
      Bottom-start
    </button>
  </div>
</div>

 const positions = [
    'top-end',
    'top-center',
    'top-start',
    'bottom-end',
    'bottom-center',
    'bottom-start',
  ];
  positions.forEach((position) => {
    const btn = document.getElementById(`toast_position_${position}`);
    if (btn) {
      btn.addEventListener('click', () => {
        MVToast.show({
          message: `This toast is at ${position.replace('-', ' ')}!`,
          position,
        });
      });
    }
  });

Size

Toast size is defined by the size option.

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

const sizes = ['sm', 'md', 'lg'];
  sizes.forEach((size) => {
    const btn = document.getElementById(`toast_size_${size}`);
    if (btn) {
      btn.addEventListener('click', () => {
        MVToast.show({
          message: `This is a ${size.toUpperCase()} toast!`,
          size,
        });
      });
    }
  });