Alert

<wa-alert> Since 3.0 experimental

Alerts are used to display important messages inline.

Unlike <wa-callout>, alerts are stateful and can be shown/hidden, optionally dismissed, and auto-hidden after a duration. Use alerts when the message lifecycle matters. Use callouts for static, always-visible messaging.

This is a standard alert. You can customize its content and even the icon. 
<wa-alert open>
  <wa-icon slot="icon" name="circle-info" library="cdn"></wa-icon>
  This is a standard alert. You can customize its content and even the icon.
</wa-alert>

Alerts are only visible when the open attribute is present.

Examples

Variants

Set the variant attribute to change the alert's variant.

This is super informative
You can tell by how pretty the alert is.
Your changes have been saved
You can safely exit the app now.
Your settings have been updated
Settings will take effect on next login.
Your session has ended
Please login again to continue.
Your account has been deleted
We're very sorry to see you go! 
<wa-alert variant="brand" open>
  <wa-icon slot="icon" name="circle-info" library="cdn"></wa-icon>
  <strong>This is super informative</strong><br />
  You can tell by how pretty the alert is.
</wa-alert>

<br />

<wa-alert variant="success" open>
  <wa-icon slot="icon" name="circle-check" library="cdn"></wa-icon>
  <strong>Your changes have been saved</strong><br />
  You can safely exit the app now.
</wa-alert>

<br />

<wa-alert variant="neutral" open>
  <wa-icon slot="icon" name="gear" library="cdn"></wa-icon>
  <strong>Your settings have been updated</strong><br />
  Settings will take effect on next login.
</wa-alert>

<br />

<wa-alert variant="warning" open>
  <wa-icon slot="icon" name="triangle-exclamation" library="cdn"></wa-icon>
  <strong>Your session has ended</strong><br />
  Please login again to continue.
</wa-alert>

<br />

<wa-alert variant="danger" open>
  <wa-icon slot="icon" name="circle-exclamation" library="cdn"></wa-icon>
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</wa-alert>

Closable

Add the closable attribute to show a close button that will hide the alert.

You can close this alert any time! 
<wa-alert variant="brand" open closable class="alert-closable">
  <wa-icon slot="icon" name="circle-info" library="cdn"></wa-icon>
  You can close this alert any time!
</wa-alert>

<script>
  const alert = document.querySelector('.alert-closable');
  alert.addEventListener('wa-after-hide', () => {
    setTimeout(() => (alert.open = true), 2000);
  });
</script>

Without Icons

Icons are optional. Simply omit the icon slot if you don't want them.

Nothing fancy here, just a simple alert. 
<wa-alert variant="brand" open> Nothing fancy here, just a simple alert. </wa-alert>

Duration

Set the duration attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement. The timer pauses while the alert is hovered.

Show Alert This alert will automatically hide itself after three seconds, unless you interact with it. 
<div class="alert-duration">
  <wa-button variant="brand">Show Alert</wa-button>

  <wa-alert variant="brand" duration="3000" closable>
    <wa-icon slot="icon" name="circle-info" variant="regular" library="cdn"></wa-icon>
    This alert will automatically hide itself after three seconds, unless you interact with it.
  </wa-alert>
</div>

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

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

<style>
  .alert-duration wa-alert {
    margin-top: var(--wa-space-m);
  }
</style>

Importing

Autoloading components via projects is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.

CDN npm React

Let your project code do the work! Sign up for free to use a project with your very own CDN — it's the fastest and easiest way to use Web Awesome.

To manually import this component from NPM, use the following code. 

import '@awesome.me/webawesome/dist/components/alert/alert.js';

To manually import this component from React, use the following code. 

import WaAlert from '@awesome.me/webawesome/dist/react/alert';

Slots

Learn more about using slots.

Attributes & Properties

Learn more about attributes and properties.

Methods

Learn more about methods.

Events

Learn more about events.

CSS custom properties

Learn more about CSS custom properties.

CSS parts

Learn more about CSS parts.

Dependencies

This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.

Need a hand? Report a bug Ask for help
    No results