→ Melissa Chen
→ Responsive Alert Messages for Web Applic...

Responsive Alert Messages for Web Applications

A collection of versatile alert components with success, error, warning, and info styles for web applications. Each alert includes appropriate icons and dismiss functionality.

This Example is contributed by Melissa Chen, on 08-Apr-2025. It is responsive. similar terms for this example are Toast, Snackbar

Notification Feedback Toast Message

Author Melissa Chen

Fork Fullscreen

<div class="alert-container">
  <div class="alert alert-success">
    <div class="alert-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-.997-4L6.76 11.757l1.414-1.414 2.829 2.829 5.656-5.657 1.415 1.414L11.003 16z" fill="currentColor"/>
      </svg>
    </div>
    <div class="alert-content">
      <h4>Success!</h4>
      <p>Your changes have been successfully saved.</p>
    </div>
    <button class="alert-close">&times;</button>
  </div>

<div class="alert alert-error">
    <div class="alert-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-7v2h2v-2h-2zm0-8v6h2V7h-2z" fill="currentColor"/>
      </svg>
    </div>
    <div class="alert-content">
      <h4>Error!</h4>
      <p>There was a problem processing your request.</p>
    </div>
    <button class="alert-close">&times;</button>
  </div>

<div class="alert alert-warning">
    <div class="alert-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12.866 3l9.526 16.5a1 1 0 0 1-.866 1.5H2.474a1 1 0 0 1-.866-1.5L11.134 3a1 1 0 0 1 1.732 0zM11 16v2h2v-2h-2zm0-7v5h2V9h-2z" fill="currentColor"/>
      </svg>
    </div>
    <div class="alert-content">
      <h4>Warning!</h4>
      <p>Your account is about to expire. Please renew your subscription.</p>
    </div>
    <button class="alert-close">&times;</button>
  </div>

<div class="alert alert-info">
    <div class="alert-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
        <path fill="none" d="M0 0h24v24H0z"/>
        <path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm-1-11v6h2v-6h-2zm0-4v2h2V7h-2z" fill="currentColor"/>
      </svg>
    </div>
    <div class="alert-content">
      <h4>Information</h4>
      <p>Your password will expire in 7 days. Consider updating it soon.</p>
    </div>
    <button class="alert-close">&times;</button>
  </div>
</div>

Related Examples

Didn't find component you were looking for?

Search from 500+ components