Alert

<wa-alert>

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"></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

Link to This Section

Variants

Link to This Section

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!

  Just so you know

  Here's some additional information you might find useful.

<wa-alert variant="brand" open>
  <wa-icon slot="icon" name="circle-info"></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"></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"></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"></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"></wa-icon>
  <strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</wa-alert>

<br />

<wa-alert variant="info" open>
  <wa-icon slot="icon" name="circle-info"></wa-icon>
  <strong>Just so you know</strong><br />
  Here's some additional information you might find useful.
</wa-alert>

Closable

Link to This Section

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"></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

Link to This Section

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

Link to This Section

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"></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

Link to This Section

If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick a component manually, use one of the following snippets.

CDN

npm

Self-Hosted

React

Import this component directly from the CDN:

import 'https://ka-f.webawesome.com/webawesome@0.17.0/components/alert/alert.js';

After installing Web Awesome via npm, import this component:

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

If you're self-hosting Web Awesome, import this component from your server:

import './webawesome/dist/components/alert/alert.js';

To import this component for React 18 or below, use the following code:

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

Slots

Link to This Section

Learn more about using slots.

Name	Description
(default)	The alert's main content.
`close-icon`	An optional close icon to use instead of the default.
`icon`	An optional icon to show in the alert. Works best with `<wa-icon>`.

Attributes & Properties

Link to This Section

Learn more about attributes and properties.

Name	Description	Reflects
`appearance` `appearance`	The callout's visual appearance. Type `'accent' \| 'filled' \| 'outlined' \| 'plain' \| 'filled-outlined'`
`closable` `closable`	Makes the alert closable and shows the close button. Type `boolean` Default `false`
`duration` `duration`	The amount of time, in milliseconds, to wait before closing the alert. Set to `Infinity` to disable. Default `Infinity`
`open` `open`	Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert. Type `boolean` Default `false`
`size` `size`	The callout's size. Type `'xs' \| 's' \| 'm' \| 'l' \| 'xl' \| 'small' \| 'medium' \| 'large'` Default `'m'`
`variant` `variant`	The callout's theme variant. Defaults to `brand` if not within another element with a variant. Type `'brand' \| 'neutral' \| 'success' \| 'warning' \| 'danger' \| 'info'` Default `'brand'`

Methods

Link to This Section

Learn more about methods.

Name	Description	Arguments
`hide()`	Hides the alert.
`show()`	Shows the alert.

Events

Link to This Section

Learn more about events.

Name	Description
`wa-after-hide`	Emitted after the alert closes and all animations are complete.
`wa-after-show`	Emitted after the alert opens and all animations are complete.
`wa-hide`	Emitted when the alert closes.
`wa-show`	Emitted when the alert opens.

CSS Custom Properties

Link to This Section

Learn more about CSS custom properties.

Name	Description
`--hide-duration`	The hide duration to use when applying built-in animation classes. Default `150ms`
`--show-duration`	The show duration to use when applying built-in animation classes. Default `150ms`

CSS Parts

Link to This Section

Learn more about CSS parts.

Name	Description	CSS selector
`close-button`	The alert's close button, a `<wa-button>`.	`::part(close-button)`
`close-button__base`	The close button's exported `base` part.	`::part(close-button__base)`
`icon`	The container that wraps the optional icon.	`::part(icon)`
`message`	The container that wraps the alert's main content.	`::part(message)`

Dependencies

Link to This Section

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

Alert

Examples

Variants

Closable

Without Icons

Duration

Importing

Slots

Attributes & Properties

Methods

Events

CSS Custom Properties

CSS Parts

Dependencies

Quick Links

Recent Searches