Alert

<sl-alert> | SlAlert
Since 1.0 stable

Alerts are used to display important messages inline or as toast notifications.

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

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! 
<sl-alert variant="info" open>
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  <strong>This is super informative</strong>
  You can tell by how pretty the alert is.
</sl-alert>

<br />

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

<br />

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

<br />

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

<br />

<sl-alert variant="danger" open>
  <sl-icon slot="icon" name="fas-diamond-exclamation"></sl-icon>
  <strong>Your account has been deleted</strong>
  We're very sorry to see you go!
</sl-alert>

Dark Variants

Add the dark attribute for dark-themed alerts.

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! 
<sl-alert variant="info" open dark>
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  <strong>This is super informative</strong>
  You can tell by how pretty the alert is.
</sl-alert>

<br />

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

<br />

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

<br />

<sl-alert variant="warning" open dark>
  <sl-icon slot="icon" name="fas-triangle-exclamation"></sl-icon>
  <strong>Your session has ended</strong>
  Please login again to continue.
</sl-alert>

<br />

<sl-alert variant="danger" open dark>
  <sl-icon slot="icon" name="fas-diamond-exclamation"></sl-icon>
  <strong>Your account has been deleted</strong>
  We're very sorry to see you go!
</sl-alert>

Closable

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

You can close this alert any time!
You can close this alert any time! 
<sl-alert variant="info" open closable class="alert-closable-light">
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  You can close this alert any time!
</sl-alert>

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

<br />

<sl-alert variant="info" open dark closable class="alert-closable-dark">
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  You can close this alert any time!
</sl-alert>

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

Actions

Add actions to an alert by using the action slot. You can add multiple actions using the same slot action. The placement of these actions can be controlled with the action-placement attribute.

Inline Actions

Set action-placement="inline" to show actions to the right of the alert’s message. When providing two actions, place the separator SVG between the two slotted actions.

Your session is about to expire Understood No thanks 
<sl-alert variant="info" open closable action-placement="inline" class="alert-actions-inline">
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  Your session is about to expire
  <span slot="action">Understood</span>
  <svg slot="action" viewBox="0 0 3 4" width="3px" height="3px" style="display: inline-block; vertical-align: middle;"><circle cx="1.5" cy="2" r="1.5" fill="currentColor" /></svg>
  <span slot="action">No thanks</span>
</sl-alert>

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

Bottom Actions

Set action-placement="bottom" to show actions below the alert’s message.

Heads up! Server unresponsive. Unsuccessful rollover out. Try again later. Understood No thanks 
<sl-alert variant="danger" open dark closable action-placement="bottom" class="alert-actions-bottom">
  <sl-icon slot="icon" name="fas-diamond-exclamation"></sl-icon>
  <strong>Heads up!</strong>
  Server unresponsive. Unsuccessful rollover out. Try again later.
  <span slot="action">Understood</span>
  <svg slot="action" viewBox="0 0 3 4" width="3px" height="3px" style="display: inline-block; vertical-align: middle;">
    <circle cx="1.5" cy="2" r="1.5" fill="currentColor" />
  </svg>
  <span slot="action">No thanks</span>
</sl-alert>

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

Single Action

You can provide just a primary or a secondary action. The separator is not needed.

Your session is about to expire. Extend session
Heads up! Server unresponsive. Unsuccessful rollover out. Try again 
<sl-alert variant="info" open closable action-placement="inline" class="alert-actions-single-inline">
  <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
  <strong>Your session is about to expire.</strong>
  <span slot="action">Extend session</span>
</sl-alert>

<br/>

<sl-alert variant="danger" open closable action-placement="bottom" class="alert-actions-single-bottom">
  <sl-icon slot="icon" name="fas-diamond-exclamation"></sl-icon>
  <strong>Heads up!</strong>
  Server unresponsive. Unsuccessful rollover out.
  <span slot="action">Try again</span>
</sl-alert>

<script>
  const alertSingleInline = document.querySelector('.alert-actions-single-inline');
  alertSingleInline.addEventListener('sl-after-hide', () => {
    setTimeout(() => (alertSingleInline.open = true), 2000);
  });

  const alertSingleBottom = document.querySelector('.alert-actions-single-bottom');
  alertSingleBottom.addEventListener('sl-after-hide', () => {
    setTimeout(() => (alertSingleBottom.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. 
<sl-alert variant="info" open> Nothing fancy here, just a simple alert. </sl-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.

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

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

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

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

<style>
  .alert-duration sl-alert {
    margin-top: var(--sl-spacing-medium);
  }
</style>

Countdown

Set the countdown attribute to display a loading bar that indicates the alert remaining time. This is useful for alerts with relatively long duration.

Show Alert You’re not stuck, the alert will close after a pretty long duration. 
<div class="alert-countdown">
  <sl-button variant="primary">Show Alert</sl-button>

  <sl-alert variant="info" duration="10000" countdown="rtl" closable>
    <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
    You're not stuck, the alert will close after a pretty long duration.
  </sl-alert>
</div>

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

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

<style>
  .alert-countdown sl-alert {
    margin-top: var(--sl-spacing-medium);
  }
</style>

Toast Notifications

To display an alert as a toast notification, create the alert and call its toast() method.

Create Toast 
<div class="alert-toast">
  <sl-button>Create Toast</sl-button>
</div>

<script>
  const container = document.querySelector('.alert-toast');
  const button = container.querySelector('sl-button');
  let count = 0;

  function notify(message, variant = 'info', icon = 'fas-circle-info', duration = 3000) {
    const alert = Object.assign(document.createElement('sl-alert'), {
      variant,
      closable: true,
      duration: duration,
      innerHTML: `
        <sl-icon name="${icon}" slot="icon"></sl-icon>
        ${message}
      `
    });
    document.body.append(alert);
    alert.toast();
  }

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

Positioned Alerts

You can create banner-style alerts that are positioned inside a container. To make this work, the container needs position: relative and a defined height.

All positioning styles (position: absolute, width, top, left, etc.) must be applied to the alert’s internal ::part(base) element.

Top-Left This alert is in the top-left corner. Top-Right This alert is in the top-right corner. 
<div class="alert-positioning-demo">
  <sl-alert variant="info" open class="alert-top-left">
    <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
    <strong>Top-Left</strong> This alert is in the top-left corner.
  </sl-alert>

  <sl-alert variant="info" open class="alert-top-right">
    <sl-icon slot="icon" name="fas-circle-info"></sl-icon>
    <strong>Top-Right</strong> This alert is in the top-right corner.
  </sl-alert>
</div>

<style>
  .alert-positioning-demo {
    position: relative;
    height: 100px; /* A height is required for positioning */
  }

  /* Apply positioning to the ::part(base) element */
  .alert-positioning-demo .alert-top-left::part(base) {
    position: absolute;
    top: 0;
    left: 0;
    width: 250px;
  }

  .alert-positioning-demo .alert-top-right::part(base) {
    position: absolute;
    top: 0;
    right: 0;
    width: 250px;
  }
</style>

The Toast Stack

The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.

By default, the toast stack is positioned at the bottom of the viewport and centered. You can change its position by targeting .sl-toast-stack in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles. 

.sl-toast-stack {
  top: 0;
  right: 0;
}

Slots

Name Description
(default) The alert’s main content.
icon An icon to show in the alert. Works best with <sl-icon>.
action An action to show in the alert.

Learn more about using slots.

Properties

Name Description Reflects Type Default
open Indicates whether or not the alert is open. You can toggle this attribute to show and hide the alert, or you can use the show() and hide() methods and this attribute will reflect the alert’s open state. boolean false
duration The length of time, in milliseconds, the alert will show before closing itself. If the user interacts with the alert before it closes (e.g. moves the mouse over it), the timer will restart. Defaults to Infinity, meaning the alert will not close on its own. - Infinity
countdown Enables a countdown that indicates the remaining time the alert will be displayed. Typically used to indicate the remaining time before a whole app refresh. 'rtl' | 'ltr' -
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
sl-show Emitted when the alert opens. -
sl-after-show Emitted after the alert opens and all animations are complete. -
sl-hide Emitted when the alert closes. -
sl-after-hide Emitted after the alert closes and all animations are complete. -

Learn more about events.

Methods

Name Description Arguments
show() Shows the alert. -
hide() Hides the alert -
toast() Displays the alert as a toast notification. This will move the alert out of its position in the DOM and, when dismissed, it will be removed from the DOM completely. By storing a reference to the alert, you can reuse it by calling this method again. The returned promise will resolve after the alert is hidden. -

Learn more about methods.

Parts

Name Description
base The component’s base wrapper.
icon The container that wraps the optional icon.
message The container that wraps the alert’s main content.
close-button The close button, an <sl-icon-button>.
close-button__base The close button’s exported base part.

Learn more about customizing CSS parts.

Animations

Name Description
alert.show The animation to use when showing the alert.
alert.hide The animation to use when hiding the alert.

Learn more about customizing animations.

Dependencies

This component automatically imports the following dependencies.

  • <sl-icon>
  • <sl-icon-button>