Ynex - Alerts

Basic Alert

Holy guacamole! You should check in on some of those fields below.

<div className="alert alert-warning  fade show flex" role="alert" id="dismiss-alert1">
<div className="sm:flex-shrink-0">
    <strong>Holy guacamole!</strong> You should check in on some of those fields
    below.
</div>
<div className="ms-auto">
    <div className="mx-1 my-1">
        <button type="button"
            className="inline-flex bg-teal-50 rounded-sm text-teal-500 focus:outline-none focus:ring-0 
            focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600"
            data-hs-remove-element="#dismiss-alert1">
            <span className="sr-only">Dismiss</span>
            <svg className="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>

Default Alert

A new software update is available. See what's new in version 3.0.7

Details

<div className="bg-gray-50 border border-gray-200 dark:bg-light
 dark:border-defaultborder/10 alert mb-0"role="alert">
 <divclassName="flex">
 <divclassName="sm:flex-shrink-0">
 <svg className="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">
 <pathd="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 className="">
  <div className="flex-1 md:flex md:justify-between ms-2">
  <p className="text-sm dark:text-defaulttextcolor/70">
  A new software update is available. See whats new in version 3.0.7<p>
  <p className="text-sm mt-3 md:mt-0 md:ms-6">
  <a className="dark:text-defaulttextcolor/70 hover:text-gray-500 
  font-medium whitespace-nowrap"href="#;">Details</a>
  <p className="">
  <div>
  </div>
  </div>

Default alerts

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

{defaultalerts.map((idx) => 
    (&lt;div className={a&#768;alert alert-&#36;{idx.color}a&#769;} role="alert" key={Math.random()}>
    {a&#768; A simple &#36;{idx.text} alert—check it out!a&#769;}&lt;/div>))}

Links In Alerts

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

{defaultalerts.map((idx) => 
    (<div className={a&#768;alert alert-&#36;{idx.color}a&#769;} role="alert" key={Math.random()}>
     {a&#768;A simple &#36;{idx.text} alert witha&#769;} 
     <Link href="#" className="alert-link">an example link</Link>
     .Give it a click if you like.</div>))}

Solid Colored Alerts

A simple solid primary alert—check it out!

A simple solid secondary alert—check it out!

A simple solid success alert—check it out!

A simple solid danger alert—check it out!

A simple solid warning alert—check it out!

A simple solid info alert—check it out!

A simple solid light alert—check it out!

A simple solid dark alert—check it out!

{solidalert.map((idx) => 
    (<div className={a&#768;alert alert-solid-&#36;{idx.color} alert-dismissible fade show flexa&#769;} 
        role="alert" key={Math.random()} id="dismiss-alert2"><div className="sm:flex-shrink-0">
        {a&#768; A simple solid &#36;{idx.color} alert—check it out!a&#769;}</div>
        <div className="ms-auto"><div className="mx-1 my-1"> 
        <button type="button" className="inline-flex bg-teal-50 rounded-sm text-teal-500 focus:outline-none focus:ring-0
         focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600" data-hs-remove-element="#dismiss-alert2">
         <span className="sr-only">Dismiss</span>
         <svg className="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>))}

Outline Alerts

A simple outline primary alert—check it out!

A simple outline secondary alert—check it out!

A simple outline success alert—check it out!

A simple outline danger alert—check it out!

A simple outline warning alert—check it out!

A simple outline info alert—check it out!

A simple outline light alert—check it out!

A simple outline dark alert—check it out!

{solidalert1.map((idx) =>
     ( <div className={a&#768;alert alert-outline-&#36;{idx.color} alert-dismissible fade show flexa&#769;} 
        role="alert" key={Math.random()id="dismiss-alert10"><div className="sm:flex-shrink-0">
        {a&#768;  A simple outline &#36;{idx.color} alert—check it out!a&#769;}</div>
        <div className="ms-auto">
        <div className="mx-1 my-1">
<button type="button" className="inline-flex bg-teal-50 rounded-sm
 text-teal-500 focus:outline-none focus:ring-0 focus:ring-offset-0
focus:ring-offset-teal-50 focus:ring-teal-600" 
data-hs-remove-element="#dismiss-alert10">
<span className="sr-only">Dismiss</span>
<svg className="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>
 ))}

Solid Alerts With Different Shadows

A simple solid primary alert with small it out!

A simple solid secondary alert with small it out!

{shadows.map((idx) => 
( <div className={a&#768;alert alert-solid-&#36;{idx.color} 
alert-dismissible fade show flexa&#769;} role="alert"
 key={Math.random()}id="dismiss-alert18">
 <div className="sm:flex-shrink-0">
 {a&#768;A simple solid &#36;{idx.color} 
 alert with small shadow—check it out!a&#769;}</div>
 <div className="ms-auto">
 <div className="mx-1 my-1">
 <button type="button" 
 className="inline-flex bg-teal-50 rounded-sm text-teal-500 focus:outline-none focus:ring-0
  focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600"
   data-hs-remove-element="#dismiss-alert18">
<span className="sr-only">Dismiss</span>
<svg className="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>))}

Default Alerts With Different Shadows

A simple primary alert with small it out!

A simple secondary alert with small it out!

{shadows.map((idx) => 
(<div className={a&#768;alert alert-&#36;{idx.color} shadow-sma&#769;}
 key={Math.random()}>{a&#768;A simple &#36;{idx.color} 
 alert with smallshadow—check it out!a&#769;}</div>))}

Rounded Solid Alerts

A simple solid rounded primary alert—check it out!

A simple solid rounded secondary alert—check it out!

A simple solid rounded warning alert—check it out!

A simple solid rounded danger alert—check it out!

{roundedalerts.map((idx) 
=> (<div className={a&#768;alert alert-solid-&#36;{idx.color}
 !rounded-full alert-dismissible fade show flexa&#769;} 
 key={Math.random()}role="alert" id="dismiss-alert24">
 <div className="sm:flex-shrink-0">
 {a&#768;A simple solid rounded &#36;{idx.color} 
 alert—check it out!a&#769;}</div>
 <div className="ms-auto">
 <div className="mx-1 my-1">
 <button type="button" className="inline-flex bg-teal-50 
 rounded-sm text-teal-500 focus:outline-none focus:ring-0
  focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600"
 data-hs-remove-element="#dismiss-alert24">
 <span className="sr-only">Dismiss</span>
 <svg className="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>))}

Rounded Outline Alerts

A simple outline rounded primary alert—check it out!

A simple outline rounded secondary alert—check it out!

A simple outline rounded warning alert—check it out!

A simple outline rounded danger alert—check it out!

{roundedalerts.map((idx) => 
(<div className={a&#768;alert alert-outline-&#36;{idx.color} 
!rounded-full alert-dismissible fade show flexa&#769;} 
key={Math.random()}role="alert" id="dismiss-alert28">
<div className="sm:flex-shrink-0">
{a&#768;A simple outline rounded &#36;{idx.color} alert—check it out!a&#769;}
</div>
<div className="ms-auto">
<div className="mx-1 my-1">
<button type="button"  className="inline-flex bg-teal-50 rounded-sm
 text-teal-500 focus:outline-none focus:ring-0 focus:ring-offset-0 
 focus:ring-offset-teal-50 focus:ring-teal-600"
  data-hs-remove-element="#dismiss-alert28">
  <span className="sr-only">Dismiss</span>
<svg className="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>))}

Rounded Default Alert

A simple solid rounded primary alert—check it out!

A simple solid rounded secondary alert—check it out!

A simple solid rounded warning alert—check it out!

A simple solid rounded danger alert—check it out!

{roundedalerts.map((idx) => 
(<div className={a&#768;alert alert-&#36;{idx.color} !rounded-full
 alert-dismissible fade show flexa&#769;}
  key={Math.random()} role="alert" id="dismiss-alert32">
  <div className="sm:flex-shrink-0">
  {a&#768;A simple solid rounded &#36;{idx.color} 
  alert—check it out!a&#769;}</div>
  <div className="ms-auto">
  <div className="mx-1 my-1">
  <button type="button" 
  className="inline-flex bg-teal-50 rounded-sm text-teal-500
   focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-teal-50
    focus:ring-teal-600"  data-hs-remove-element="#dismiss-alert32">
<span className="sr-only">Dismiss</span>
<svg className="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>))}

Rounded Alert With Custom Close Button

A simple rounded primary alert—check it out!

A simple rounded secondary alert—check it out!

A simple rounded warning alert—check it out!

A simple rounded danger alert—check it out!

{roundedalerts.map((idx) => 
    (<div className={a&#768;alert alert-&#36;{idx.color} 
!rounded-full alert-dismissible fade showa&#769;} 
key={Math.random()} id="dismiss-alert36">{a&#768;A simple rounded &#36;{idx.color}
 alert—check it out!a&#769;}
 <button type="button"  
 className="inline-flex bg-teal-50 ltr:float-right rtl:float-left
  text-teal-500 focus:outline-none focus:ring-0 focus:ring-offset-0 
focus:ring-offset-teal-50 focus:ring-teal-600" 
data-hs-remove-element="#dismiss-alert36">
<span className="sr-only">Dismiss</span>
<svg className="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>))}

Alerts With Icons

An example primary alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

{iconalerts.map((idx) =>
(<div className={a&#768;alert alert-&#36;{idx.color} 
flex items-centera&#769;} role="alert" key={Math.random()}>
{idx.icon}<div> {a&#768; An example &#36;{idx.color} alert  
with an icona&#769;}
</div>
</div>))}

Customized Alerts With SVG's

A customized primary alert with an icon

<div className="alert alert-primary 
alert-dismissible dark:!bg-bodybg fade show custom-alert-icon shadow-sm
 flex items-center" role="alert" id="dismiss-alert40"><div>
<svg className="svg-primary me-1" xmlns="http://www.w3.org/2000/svg" 
height="1.5rem" viewBox="0 0 24 24" width="1.5rem" fill="#000000">
<path d="M0 0h24v24H0z" fill="none" />
<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12
 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" />
</svg>
</div>
<div>A customized primary alert with an icon</div>
<div className="ms-auto">
<div className="mx-1 my-1">
<button type="button" className="inline-flex bg-teal-50 rounded-sm 
text-teal-500 focus:outline-none
 focus:ring-0 focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600" 
 data-hs-remove-element="#dismiss-alert40">
 <span className="sr-only">Dismiss</span>
 <svg className="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>

Alert With Images

A simple primary rounded alert with image—check it out!

A simple secondary rounded alert with image—check it out!

A simple warning rounded alert with image—check it out!

A simple danger rounded alert with image—check it out!

A simple info rounded alert with image—check it out!

A simple light rounded alert with image—check it out!

A simple dark rounded alert with image—check it out!

<div className="alert alert-img alert-primary 
alert-dismissible fase show !rounded-full flex-wrap relative" 
role="alert" id="dismiss-alert44">
<div className="avatar avatar-sm me-3 avatar-rounded">
<img src="../../../assets/images/faces/3.jpg" alt="img" />
</div><div>A simple primary alert with image—check it out!</div>
<button type="button" className="m-2 p-3 absolute end-0 top-0 
inline-flex bg-teal-50 rounded-sm text-teal-500 focus:outline-none
 focus:ring-0 focus:ring-offset-0 focus:ring-offset-teal-50 
 focus:ring-teal-600" data-hs-remove-element="#dismiss-alert44">
 <span className="sr-only">Dismiss</span>
 <svg className="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>

Alert With Different Size Images

A simple primary alert with image—check it out!

A simple secondary alert with image—check it out!

A simple warning alert with image—check it out!

A simple danger alert with image—check it out!

A simple info alert with image—check it out!

<div className="alert alert-img alert-primary
 alert-dismissible fase show flex-wrap relative" role="alert" 
 id="dismiss-alert51"><div className="avatar avatar-xs me-3">
 <img src="../../../assets/images/faces/3.jpg" alt="img" /></div>
 <div>A simple primary alert with image—check it out!</div>
 <button type="button" className="m-2 p-3 absolute end-0 top-0  
 inline-flex bg-teal-50 rounded-sm text-teal-500 focus:outline-none 
 focus:ring-0 focus:ring-offset-0 focus:ring-offset-teal-50 focus:ring-teal-600" 
 data-hs-remove-element="#dismiss-alert51"><span className="sr-only">Dismiss
 </span>
 <svg className="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>

Information?

This alert is created to just show the related information.

Confirmed

This alert is created to just show the confirmation message.

Warning

This alert is created to just show the warning message.

danger

This alert is created to just show the danger message.

Information Alert

Information alert to show to information

cancel open

Success Alert

Success alert to show to success message

cancel open

Warning Alert

Warning alert to show warning message

cancel open

Danger Alert

Danger alert to show the danger message

cancel open

Information Alert

Information alert to show to information

cancel open

Success Alert

Success alert to show to success message

Warning Alert

Warning alert to show to warning message

skip open

Danger Alert

Danger alert to show to danger message

close continue

Additional Content

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

Thank you for reporting this.

We appreciate you to let us know the bug in the template and for warning us about future consequences Visit for support for queries ?

<div className="xxl:col-span-6 col-span-12">
<div className="alert alert-primary overflow-hidden !p-0" role="alert" 
id="dismiss-alert65">
<div className="p-4 bg-primary text-white flex justify-between">
<h6 className="aletr-heading mb-0 text-[1rem]">Thank you for reporting this.
</h6><button type="button" className="inline-flex bg-teal-50 rounded-sm text-teal-500 
focus:outline-none focus:ring-0 focus:ring-offset-0 focus:ring-offset-teal-50 
focus:ring-teal-600" data-hs-remove-element="#dismiss-alert65">
<span className="sr-only">Dismiss</span>
<svg className="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 className="p-3">
 <p className="mb-0">We appreciate you to let us know the bug in the template 
 and for warning us about future consequences <Link href="#" className="font-semibold
  underline text-defaulttextcolor">Visit for support for queries ?
  </Link>
  </p>
  </div>
  </div>
  </div>

Switcher

Search result of

Alerts

Information?

Confirmed

Warning

danger

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.

Thank you for reporting this.