Banner

<ahi-banner open closable>
  We are working on APIs that will allow developers to tap into Azalea Health's platform and are opening a selection of
  these resources to a small number of private beta partners. If you are interested in becoming a beta partner, or want
  to learn more about how you can integrate your product with Azalea Health, please contact us.
</ahi-banner>

        
  
        
      

<ahi-banner variant="info" title="Pro Tip!" open closable>
  Use the datepicker to select a range, then use the buttons to set the granularity.
</ahi-banner>

        
  
        
      

<ahi-banner variant="info" open>
  Your visit summary is ready. <a class="ahi-link" href="#">Review it before your next appointment</a>.
</ahi-banner>

        
  
        
      

<ahi-banner variant="success" title="Your report is ready to print." open closable>
  <ahi-button outline>Print report</ahi-button>
</ahi-banner>

        
  
        
      

<ahi-banner variant="warning" title="Before you can save this patient, this change needs to be made:" open>
  The name of the patient has characters that aren't allowed. The name can not include spaces or hyphens.
  <br />
  <ahi-button outline>Edit name</ahi-button>
</ahi-banner>

        
  
        
      

<ahi-banner variant="critical" title="Suspicious account activity detected" open>
  <p>For your protection, you need to change your password.</p>
  <div class="ahi-row ahi-gap-0">
    <ahi-button outline>Change password</ahi-button>
    <ahi-button plain>Review account activity</ahi-button>
  </div>
</ahi-banner>

        
  
        
      

<div class="banner-duration">
  <ahi-button>Show Banner</ahi-button>
  <ahi-banner duration="3000" closable>
    This banner will automatically hide itself after three seconds, unless you interact with it.
  </ahi-banner>
</div>

<script>
  const container = document.querySelector('.banner-duration');
  const button = container.querySelector('ahi-button');
  const banner = container.querySelector('ahi-banner');

  button.addEventListener('click', () => banner.show());
</script>

<style>
  .banner-duration ahi-button {
    margin: var(--ahi-space-4) 0;
  }
</style>

        
  
        
      

<div class="banner-countdown">
  <ahi-button>Show Banner</ahi-button>
  <ahi-banner duration="10000" countdown closable>
    The banner will close after a pretty long duration.
  </ahi-banner>
</div>

<script>
  const container = document.querySelector('.banner-countdown');
  const button = container.querySelector('ahi-button');
  const banner = container.querySelector('ahi-banner');
  button.addEventListener('click', () => banner.show());
</script>

<style>
  .banner-countdown ahi-banner {
    margin-top: var(--ahi-space-4);
  }
</style>

        
  
        
      

<div class="banner-toast">
  <ahi-button>Show Toast</ahi-button>
  <ahi-banner variant="success" title="John Doe has been saved" duration="3000" closable>
    This toast will automatically hide itself after three seconds, unless you interact with it.
  </ahi-banner>
</div>

<script>
  const container = document.querySelector('.banner-toast');
  const button = container.querySelector('ahi-button');
  const banner = container.querySelector('ahi-banner');

  button.addEventListener('click', () => banner.toast());
</script>

        
  
        
      

<div class="banner-imperative-toast">
  <ahi-button>Create Toast</ahi-button>
</div>

<script>
  const container = document.querySelector('.banner-imperative-toast');
  const button = container.querySelector('ahi-button');
  let count = 0;

  // Always escape HTML for text arguments!
  function escapeHtml(html) {
    const div = document.createElement('div');
    div.textContent = html;
    return div.innerHTML;
  }

  // Custom function to emit toast notifications
  function notify(message, variant = 'success', duration = 3000) {
    const banner = Object.assign(document.createElement('ahi-banner'), {
      variant,
      closable: true,
      duration: duration,
      innerHTML: escapeHtml(message)
    });

    document.body.append(banner);
    return banner.toast();
  }

  button.addEventListener('click', () => {
    notify(`This is custom toast #${++count}`);
  });
</script>