Alert - JS + CSS

Alert

Struktur HTML


<div class="ina-alert ina-alert--neutral" role="alert">
  <div class="ina-alert__icon">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="24"
      height="24"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
      <path d="M6 17.6l-2 -1.1v-2.5"></path>
      <path d="M4 10v-2.5l2 -1.1"></path>
      <path d="M10 4.1l2 -1.1l2 1.1"></path>
      <path d="M18 6.4l2 1.1v2.5"></path>
      <path d="M20 14v2.5l-2 1.12"></path>
      <path d="M14 19.9l-2 1.1l-2 -1.1"></path>
      <path d="M12 12l2 -1.1"></path>
      <path d="M18 8.6l2 -1.1"></path>
      <path d="M12 12l0 2.5"></path>
      <path d="M12 18.5l0 2.5"></path>
      <path d="M12 12l-2 -1.12"></path>
      <path d="M6 8.6l-2 -1.1"></path>
    </svg>
  </div>
  <div class="ina-alert__content">
    <div class="ina-alert__text-section">
      <div class="ina-alert__title">Neutral Alert</div>
      <div class="ina-alert__description">Berikan deskripsi yang jelas dan bermakna di sini. Idealnya, batasi hingga dua baris.</div>
    </div>
  </div>
</div>

Contoh Penggunaan

Variasi Alert

Neutral Alert

Ini adalah alert dengan variant neutral.

Info Alert

Ini adalah alert dengan variant info.

Success Alert

Ini adalah alert dengan variant success.

Caution Alert

Ini adalah alert dengan variant caution.

Critical Alert

Ini adalah alert dengan variant critical.

<div class="space-y-4">
  <!-- Neutral Alert -->
  <div class="ina-alert ina-alert--neutral" role="alert">
    <div class="ina-alert__icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="24"
        height="24"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        class="icon icon-tabler icons-tabler-outline icon-tabler-cube-3d-sphere"
        ><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M6 17.6l-2 -1.1v-2.5"
        ></path><path d="M4 10v-2.5l2 -1.1"></path><path d="M10 4.1l2 -1.1l2 1.1"></path><path
          d="M18 6.4l2 1.1v2.5"></path><path d="M20 14v2.5l-2 1.12"></path><path
          d="M14 19.9l-2 1.1l-2 -1.1"></path><path d="M12 12l2 -1.1"></path><path d="M18 8.6l2 -1.1"
        ></path><path d="M12 12l0 2.5"></path><path d="M12 18.5l0 2.5"></path><path
          d="M12 12l-2 -1.12"></path><path d="M6 8.6l-2 -1.1"></path></svg
      >
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Neutral Alert</div>
        <div class="ina-alert__description">Ini adalah alert dengan variant neutral.</div>
      </div>
    </div>
  </div>

  <!-- Info Alert -->
  <div class="ina-alert ina-alert--info" role="alert">
    <div class="ina-alert__icon">
      <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13 16H12V12H11M12 8H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Info Alert</div>
        <div class="ina-alert__description">Ini adalah alert dengan variant info.</div>
      </div>
    </div>
  </div>

  <!-- Success Alert -->
  <div class="ina-alert ina-alert--success" role="alert">
    <div class="ina-alert__icon">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
        size="20"
        class="tabler-icon tabler-icon-check"><path d="M5 12l5 5l10 -10"></path></svg
      >
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Success Alert</div>
        <div class="ina-alert__description">Ini adalah alert dengan variant success.</div>
      </div>
    </div>
  </div>

  <!-- Caution Alert -->
  <div class="ina-alert ina-alert--caution" role="alert">
    <div class="ina-alert__icon">
      <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64538 18.3024 1.55299 18.6453 1.55201 18.9945C1.55103 19.3437 1.64151 19.6871 1.81445 19.9905C1.98738 20.2939 2.23675 20.5467 2.53773 20.7238C2.83871 20.9009 3.18082 20.9962 3.53 21H20.47C20.8192 20.9962 21.1613 20.9009 21.4623 20.7238C21.7633 20.5467 22.0126 20.2939 22.1856 19.9905C22.3585 19.6871 22.449 19.3437 22.448 18.9945C22.447 18.6453 22.3546 18.3024 22.18 18L13.71 3.86C13.5315 3.56611 13.2807 3.32311 12.9812 3.15448C12.6817 2.98585 12.3438 2.89725 12 2.89725C11.6562 2.89725 11.3183 2.98585 11.0188 3.15448C10.7193 3.32311 10.4685 3.56611 10.29 3.86Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Caution Alert</div>
        <div class="ina-alert__description">Ini adalah alert dengan variant caution.</div>
      </div>
    </div>
  </div>

  <!-- Critical Alert -->
  <div class="ina-alert ina-alert--critical" role="alert">
    <div class="ina-alert__icon">
      <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M12 8V12M12 16H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Critical Alert</div>
        <div class="ina-alert__description">Ini adalah alert dengan variant critical.</div>
      </div>
    </div>
  </div>
</div>

Dismissible Alert

Alert ini bisa di-dismiss dengan mengklik tombol close.

<div class="flex justify-center">
  <div
    id="dismissible-alert-example"
    class="ina-alert ina-alert--info ina-alert--dismissible"
    role="alert"
  >
    <div class="ina-alert__icon">
      <svg
        width="20"
        height="20"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M13 16H12V12H11M12 8H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </div>
    <div class="ina-alert__content">
      <div class="ina-alert__text-section">
        <div class="ina-alert__title">Dismissible Alert</div>
        <div class="ina-alert__description">
          Alert ini bisa di-dismiss dengan mengklik tombol close.
        </div>
      </div>
    </div>
    <button
      type="button"
      class="ina-alert__close-button"
      aria-label="Dismiss alert"
      onclick="document.getElementById('dismissible-alert-example').style.display = 'none'"
    >
      <svg
        width="14"
        height="14"
        viewBox="0 0 24 24"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
        class="ina-alert__close-icon"
      >
        <path
          d="M18 6L6 18M6 6L18 18"
          stroke="currentColor"
          stroke-width="2"
          stroke-linecap="round"
          stroke-linejoin="round"></path>
      </svg>
    </button>
  </div>
</div>