Application toolkit - Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Solid color variants

The default form of solid color alerts.

Open this solid colour variants alerts example in new window
Copy solid colour variants alerts code 
<div class="space-y-2">
  <div class="bg-hs2-primary text-sm text-white rounded-md p-4 dark:bg-white dark:text-gray-800" role="alert">
    <span class="font-bold">Primary</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-hs2-secondary text-sm text-white rounded-md p-4" role="alert">
    <span class="font-bold">Secondary</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-hs2-info text-sm text-white rounded-md p-4" role="alert">
    <span class="font-bold">Info</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-hs2-success text-sm text-white rounded-md p-4" role="alert">
    <span class="font-bold">Success</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-hs2-warning text-sm text-white rounded-md p-4" role="alert">
    <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-hs2-danger text-sm text-white rounded-md p-4" role="alert">
    <span class="font-bold">Danger</span> alert! You should check in on some of those fields below.
  </div>
  <div class="bg-white text-sm text-gray-600 rounded-md p-4" role="alert">
    <span class="font-bold">Light</span> alert! You should check in on some of those fields below.
  </div>
</div>
Close solid colour variants alerts code

With description

Alerts can also contain additional HTML elements like headings, paragraphs and icons.

Open this with description alerts example in new window
Copy with description alerts code 
<div class="bg-hs2-warning rounded-md p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-white mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z" />
      </svg>
    </div>
    <div class="ml-4">
      <h3 class="text-sm text-white font-semibold">
        Cannot connect to the database
      </h3>
      <div class="mt-1 text-sm text-white">
        We are unable to save any progress at this time.
      </div>
    </div>
  </div>
</div>
Close with description alerts code

With list

Similarly you can use lists.

Open this with list alerts example in new window
Copy with list alerts code 
<div class="bg-hs2-danger border border-hs2-danger rounded-md p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-white mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z" />
      </svg>
    </div>
    <div class="ml-4">
      <h3 class="text-sm text-white font-semibold">
        A problem has been occurred while submitting your data.
      </h3>
      <div class="mt-2 text-sm text-white">
        <ul class="list-disc space-y-1 pl-5">
          <li>
            This username is already in use
          </li>
          <li>
            Email field can't be empty
          </li>
          <li>
            Please enter a valid phone number
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>
Close with list alerts code

Actions

More actionable alert example.

Open this actions alerts example in new window
Copy actions alerts code 
<div class="bg-hs2-info border border-hs2-info rounded-md p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-white mt-1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
      </svg>
    </div>
    <div class="ml-4">
      <h3 class="text-white font-semibold">
        YouTube would like you to send notifications
      </h3>
      <div class="mt-2 text-sm text-white">
        Notifications may include alerts, sounds and icon badges. These can be configured in Settings.
      </div>
      <div class="mt-4">
        <div class="flex space-x-3">
          <button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-white hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm">
            Don't allow
          </button>
          <button type="button" class="inline-flex justify-center items-center gap-2 rounded-md border border-transparent font-medium text-white hover:underline focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-all text-sm">
            Allow
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
Close actions alerts code

Link on right

Use utility classes to quickly provide matching colored links within any alert.

Open this link on right alerts example in new window
Copy link on right alerts code 
<div class="bg-gray-50 border border-gray-200 rounded-md p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-gray-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
      </svg>
    </div>
    <div class="flex-1 md:flex md:justify-between ml-4">
      <p class="text-sm text-gray-700">
        A new software update is available. See what's new in version 3.0.7
      </p>
      <p class="text-sm mt-3 md:mt-0 md:ml-6">
        <a class="text-gray-700 hover:text-gray-500 font-medium whitespace-nowrap" href="#">Details</a>
      </p>
    </div>
  </div>
</div>
Close link on right alerts code

Discovery

Use a discovery message to signify an update to the UI or provide information around new features and onboarding.

Open this discovery alerts example in new window
Copy discovery alerts code 
<div class="bg-white border rounded-md shadow-lg p-4 dark:bg-gray-800 dark:border-gray-700" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-blue-500 mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z" />
      </svg>
    </div>
    <div class="ml-4">
      <h3 class="text-gray-800 font-semibold dark:text-white">
        New version published
      </h3>
      <p class="mt-2 text-sm text-gray-700 dark:text-gray-400">
        Chris Lynch published a new version of this page. Refresh to see the changes.
      </p>
    </div>
  </div>
</div>
Close discovery alerts code

Dimiss button

Use dismiss-alert to dismiss a content.

Open this dismiss button alerts example in new window
Copy dismiss button alerts code 
<div id="dismiss-alert" class="hs-removing:translate-x-5 hs-removing:opacity-0 transition duration-300 bg-hs2-success border border-hs2-success rounded-md p-4" role="alert">
  <div class="flex">
    <div class="flex-shrink-0">
      <svg class="h-4 w-4 text-white mt-0.5" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z" />
      </svg>
    </div>
    <div class="ml-3">
      <div class="text-sm text-white font-medium">
        File has been successfully uploaded.
      </div>
    </div>
    <div class="pl-3 ml-auto">
      <div class="-mx-1.5 -my-1.5">
        <button type="button" class="inline-flex bg-success rounded-md p-1.5 text-white hover:bg-hs2-success-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-hs2-success focus:bg-hs2-success" data-hs-remove-element="#dismiss-alert">
          <span class="sr-only">Dismiss</span>
          <svg class="h-3 w-3" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
            <path d="M0.92524 0.687069C1.126 0.486219 1.39823 0.373377 1.68209 0.373377C1.96597 0.373377 2.2382 0.486219 2.43894 0.687069L8.10514 6.35813L13.7714 0.687069C13.8701 0.584748 13.9882 0.503105 14.1188 0.446962C14.2494 0.39082 14.3899 0.361248 14.5321 0.360026C14.6742 0.358783 14.8151 0.38589 14.9468 0.439762C15.0782 0.493633 15.1977 0.573197 15.2983 0.673783C15.3987 0.774389 15.4784 0.894026 15.5321 1.02568C15.5859 1.15736 15.6131 1.29845 15.6118 1.44071C15.6105 1.58297 15.5809 1.72357 15.5248 1.85428C15.4688 1.98499 15.3872 2.10324 15.2851 2.20206L9.61883 7.87312L15.2851 13.5441C15.4801 13.7462 15.588 14.0168 15.5854 14.2977C15.5831 14.5787 15.4705 14.8474 15.272 15.046C15.0735 15.2449 14.805 15.3574 14.5244 15.3599C14.2437 15.3623 13.9733 15.2543 13.7714 15.0591L8.10514 9.38812L2.43894 15.0591C2.23704 15.2543 1.96663 15.3623 1.68594 15.3599C1.40526 15.3574 1.13677 15.2449 0.938279 15.046C0.739807 14.8474 0.627232 14.5787 0.624791 14.2977C0.62235 14.0168 0.730236 13.7462 0.92524 13.5441L6.59144 7.87312L0.92524 2.20206C0.724562 2.00115 0.611816 1.72867 0.611816 1.44457C0.611816 1.16047 0.724562 0.887983 0.92524 0.687069Z" fill="currentColor" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
Close dismiss button alerts code