AXA Design System Lib Documentation v1.0.0

An alert displays an important, succinct message, and provides actions for users to address (or dismiss the banner). It requires a user action to be dismissed.
Alerts should be displayed at the top of the screen, below a top app bar. They’re persistent and nonmodal, allowing the user to either ignore them or interact with them at any time. Only one banner should be shown at a time.

Examples

You can use the default colour scheme of the design system depending on the type of alert to be displayed.

A simple confirmative alert is available

A simple informative alert is available

A simple error alert is available

<div class=" alert alert-confirmative" role="alert">
      <div class="alert-text">  A simple confirmative alert is available</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-informative" role="alert">
      <div class="alert-text">  A simple informative alert is available</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-error" role="alert">
      <div class="alert-text">  A simple error alert is available</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>

With icons

If you need to reinforce the type of alert, you can place an icon next to the text.

A simple confirmative alert with icons

A simple informative alert with icons

A simple error alert with icons

<div class=" alert alert-confirmative" role="alert">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 2C6.47951 2 1.99951 6.48 1.99951 12C1.99951 17.52 6.47951 22 11.9995 22C17.5195 22 21.9995 17.52 21.9995 12C21.9995 6.48 17.5195 2 11.9995 2ZM10.9995 17V11H12.9995V17H10.9995ZM10.9995 7V9H12.9995V7H10.9995Z" fill="white"/></svg>
      <div class="alert-text">  A simple confirmative alert with icons</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-informative" role="alert">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.99951 12C1.99951 6.48 6.47951 2 11.9995 2C17.5195 2 21.9995 6.48 21.9995 12C21.9995 17.52 17.5195 22 11.9995 22C6.47951 22 1.99951 17.52 1.99951 12ZM4.99951 12L9.99951 17L18.9995 8L17.5895 6.58L9.99951 14.17L6.40951 10.59L4.99951 12Z" fill="white"/></svg>
    <div class="alert-text">  A simple informative alert with icons</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-error" role="alert">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99951 6.10352e-05C4.47951 6.10352e-05 -0.000488281 4.48006 -0.000488281 10.0001C-0.000488281 15.5201 4.47951 20.0001 9.99951 20.0001C15.5195 20.0001 19.9995 15.5201 19.9995 10.0001C19.9995 4.48006 15.5195 6.10352e-05 9.99951 6.10352e-05ZM10.9995 15.0001H8.99951V13.0001H10.9995V15.0001ZM10.9995 11.0001H8.99951V5.00006H10.9995V11.0001Z" fill="white"/></svg>
    <div class="alert-text">  A simple error alert with icons</div>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>

With buttons

Alerts can contain a button to associate an action with the text

A simple confirmative alert with button

A simple informative alert with button

A simple error alert with button

 <div class=" alert alert-confirmative" role="alert">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9995 2C6.47951 2 1.99951 6.48 1.99951 12C1.99951 17.52 6.47951 22 11.9995 22C17.5195 22 21.9995 17.52 21.9995 12C21.9995 6.48 17.5195 2 11.9995 2ZM10.9995 17V11H12.9995V17H10.9995ZM10.9995 7V9H12.9995V7H10.9995Z" fill="white"/></svg>
      <div class="alert-text">  A simple confirmative alert with button</div>
      <button type="button" class="btn alert-button">
        button
      </button>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-informative" role="alert">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.99951 12C1.99951 6.48 6.47951 2 11.9995 2C17.5195 2 21.9995 6.48 21.9995 12C21.9995 17.52 17.5195 22 11.9995 22C6.47951 22 1.99951 17.52 1.99951 12ZM4.99951 12L9.99951 17L18.9995 8L17.5895 6.58L9.99951 14.17L6.40951 10.59L4.99951 12Z" fill="white"/></svg>
      <div class="alert-text">  A simple informative alert with button</div>
      <button type="button" class="btn alert-button">
        button
      </button>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
  <div class=" alert alert-error" role="alert">
    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.99951 6.10352e-05C4.47951 6.10352e-05 -0.000488281 4.48006 -0.000488281 10.0001C-0.000488281 15.5201 4.47951 20.0001 9.99951 20.0001C15.5195 20.0001 19.9995 15.5201 19.9995 10.0001C19.9995 4.48006 15.5195 6.10352e-05 9.99951 6.10352e-05ZM10.9995 15.0001H8.99951V13.0001H10.9995V15.0001ZM10.9995 11.0001H8.99951V5.00006H10.9995V11.0001Z" fill="white"/></svg>
      <div class="alert-text">  A simple error alert with button</div>
      <button type="button" class="btn alert-button">
        button
      </button>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>

Live demo

A new version of the design system lib will be available soon. Stay tuned!

  <div  id="liveAlert"  style="z-index: 99; top: 0; left: 0" class=" position-fixed  alert alert-confirmative fade  "  aria-live="assertive" aria-atomic="true" role="alert"  data-delay="7000">
      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.99951 12C1.99951 6.48 6.47951 2 11.9995 2C17.5195 2 21.9995 6.48 21.9995 12C21.9995 17.52 17.5195 22 11.9995 22C6.47951 22 1.99951 17.52 1.99951 12ZM4.99951 12L9.99951 17L18.9995 8L17.5895 6.58L9.99951 14.17L6.40951 10.59L4.99951 12Z" fill="white"/></svg>
      <div class="alert-text"> A new version of the design system lib will be available soon. Stay tuned! </div>
      <button type="button" class="btn alert-button">
        button
      </button>
      <svg  class="alert-cls-btn" data-bs-dismiss="alert"width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.66537 1.27325L8.72537 0.333252L4.9987 4.05992L1.27203 0.333252L0.332031 1.27325L4.0587 4.99992L0.332031 8.72659L1.27203 9.66659L4.9987 5.93992L8.72537 9.66659L9.66537 8.72659L5.9387 4.99992L9.66537 1.27325Z" fill="white"/></svg>
  </div>
   </div>

  <!-- script to add after loading axaDesignSystemLib js dependencie -->
    <script>
      //Live demo alert 
      var alertTrigger = document.getElementById('liveAlertBtn')
      var alertLiveExample = document.getElementById('liveAlert')
      if (alertTrigger) {
        alertTrigger.addEventListener('click', function () {
          var alert = new axalib.Alert(alertLiveExample)
          alert.show()
        })
      }
      </script>

Documentation

Components