Toast - JS + CSS

Toast

Struktur HTML


<div class="ina-toast-container ina-toast-container--top-right">
  <div class="ina-toast-item">
    <div class="ina-toast ina-toast--state-default ina-toast--style-solid ina-toast--visible">
      <div class="ina-toast__icon">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
          <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"></circle>
          <path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"></path>
        </svg>
      </div>
      <div class="ina-toast__content">
        <div class="ina-toast__text-area">
          <p class="ina-toast__title">Toast Title</p>
        </div>
      </div>
      <button class="ina-toast__close-button" aria-label="Tutup notifikasi">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-toast__close-icon">
          <line x1="18" y1="6" x2="6" y2="18"></line>
          <line x1="6" y1="6" x2="18" y2="18"></line>
        </svg>
      </button>
    </div>
  </div>
</div>

Contoh Penggunaan

Contoh 1

<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
  <div style="display: flex; align-items: center; gap: 12px; flex-wrap: wrap;">
    <button
      class="ina-button ina-button--custom ina-button--sm"
      style="background-color: var(--ina-content-primary); color: white; border: 1px solid var(--ina-content-primary);"
      id="toast-btn-default"
    >
      Show Default Toast
    </button>
    <button
      class="ina-button ina-button--custom ina-button--sm"
      style="background-color: var(--ina-negative-50); color: var(--ina-negative-600); border: 1px solid var(--ina-negative-600);"
      id="toast-btn-destructive"
    >
      Show Destructive Toast
    </button>
    <button
      class="ina-button ina-button--custom ina-button--sm"
      style="background-color: var(--ina-positive-50); color: var(--ina-positive-600); border: 1px solid var(--ina-positive-600);"
      id="toast-btn-positive"
    >
      Show Positive Toast
    </button>
  </div>
</div>

<!-- No container needed, handled by JS -->

<script is:inline>
  (function () {
    function attachListeners() {
      const btnDefault = document.getElementById('toast-btn-default');
      const btnDestructive = document.getElementById('toast-btn-destructive');
      const btnPositive = document.getElementById('toast-btn-positive');

      console.log('[Toast Example 1] Buttons found:', {
        default: !!btnDefault,
        destructive: !!btnDestructive,
        positive: !!btnPositive,
      });

      btnDefault?.addEventListener('click', () => {
        console.log('[Toast Example 1] Default button clicked');
        if (window.InaUI && window.InaUI.showToast) {
          window.InaUI.showToast({
            title: 'Information',
            message: 'This is a default toast message.',
            state: 'default',
            position: 'top-right',
          });
        } else {
          console.error('window.InaUI.showToast not found');
        }
      });

      btnDestructive?.addEventListener('click', () => {
        console.log('[Toast Example 1] Destructive button clicked');
        if (window.InaUI && window.InaUI.showToast) {
          window.InaUI.showToast({
            title: 'Error',
            message: 'This is a destructive toast message.',
            state: 'destructive',
            position: 'top-right',
          });
        }
      });

      btnPositive?.addEventListener('click', () => {
        console.log('[Toast Example 1] Positive button clicked');
        if (window.InaUI && window.InaUI.showToast) {
          window.InaUI.showToast({
            title: 'Success',
            message: 'This is a positive toast message.',
            state: 'positive',
            position: 'top-right',
          });
        }
      });
    }

    // Run immediately
    attachListeners();

    // Re-run on view transitions if needed
    document.addEventListener('astro:page-load', attachListeners);
  })();
</script>

Contoh 2

<div style="padding: 20px; display: flex; flex-direction: column; gap: 16px;">
  <button
    class="ina-button ina-button--custom ina-button--sm"
    style="background-color: var(--ina-positive-50); color: var(--ina-positive-600); border: 1px solid var(--ina-positive-600); width: 216px;"
    id="toast-btn-action"
  >
    Show Toast with Action
  </button>
</div>

<!-- No container needed, handled by JS -->

<script is:inline>
  (function () {
    function attachListeners() {
      const btnAction = document.getElementById('toast-btn-action');
      console.log('[Toast Example 2] Action button found:', !!btnAction);

      if (!btnAction) return;

      // Remove previous listener to prevent duplicates if re-attaching
      const newBtn = btnAction.cloneNode(true);
      btnAction.parentNode.replaceChild(newBtn, btnAction);

      newBtn.addEventListener('click', () => {
        console.log('[Toast Example 2] Button clicked');
        if (window.InaUI && window.InaUI.showToast) {
          window.InaUI.showToast({
            title: 'File uploaded',
            message: 'Your file has been successfully uploaded.',
            state: 'positive',
            style: 'solid',
            duration: 5000,
            position: 'top-right',
            actionHtml:
              '<button class="ina-button ina-button--custom ina-button--sm" id="toast-action-btn" style="background:transparent; border:1px solid white; color:white;">View</button>',
          });

          // Bind listener to the action button in the toast
          setTimeout(() => {
            const actionBtn = document.getElementById('toast-action-btn');
            if (actionBtn) {
              const newActionBtn = actionBtn.cloneNode(true);
              actionBtn.parentNode.replaceChild(newActionBtn, actionBtn);

              newActionBtn.addEventListener('click', () => {
                alert('Action button clicked!');
              });
            }
          }, 50);
        } else {
          console.error('window.InaUI.showToast not found');
        }
      });
    }

    // Run immediately
    attachListeners();

    // Re-run on view transitions
    document.addEventListener('astro:page-load', attachListeners);
  })();
</script>