About Project Overview Contributing Getting Started Installation Usage Themes Customizing Frameworks React Vue Angular GitHub Light Dark System

Alert

<terra-alert> | TerraAlert
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.
This is a standard alert with a white background. You can customize its content and even the icon. 
<terra-alert open>
  <terra-icon  slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
  This is a standard alert. You can customize its content and even the icon.
</terra-alert>
<br />

<terra-alert open appearance="white">
  <terra-icon  slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
  This is a standard alert with a white background. You can customize its content and even the icon.
</terra-alert>


import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const App = () => (
  <TerraAlert open>
    <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
    This is a standard alert. You can customize its content and even the icon.
  </TerraAlert>

  <TerraAlert open appearance="white">
    <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
    This is a standard alert with a white background. You can customize its content and even the icon.
  </TerraAlert>
);

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! 
<terra-alert variant="primary" open>
<terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
 <strong>This is super informative</strong><br />
  You can tell by how pretty the alert is.
</terra-alert>
<br />
<terra-alert variant="success" open>
<terra-icon slot="icon" name="outline-check-circle" library="heroicons"></terra-icon>
 <strong>Your changes have been saved </strong><br />
  You can safely exit the app now.
</terra-alert>
<br />
<terra-alert variant="neutral" open>
<terra-icon slot="icon" name="outline-cog-8-tooth" library="heroicons"></terra-icon>
  <strong>Your settings have been updated</strong><br />
  Settings will take effect on next login.
</terra-alert>
<br />
<terra-alert variant="warning" open>
<terra-icon slot="icon" name="outline-exclamation-triangle" library="heroicons"></terra-icon>
 <strong>Your session has ended</strong><br />
  Please login again to continue.
</terra-alert>
<br />
<terra-alert variant="danger" open>
<terra-icon slot="icon" name="outline-shield-exclamation" library="heroicons"></terra-icon>
<strong>Your account has been deleted</strong><br />
  We're very sorry to see you go!
</terra-alert>

import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const App = () => (
<>
  <TerraAlert variant="primary" open>
    <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
     <strong>This is super informative</strong>
      <br />
      You can tell by how pretty the alert is.
  </TerraAlert>
  <br />
  <TerraAlert variant="success" open>
    <TerraIcon slot="icon" name="outline-check-circle" library="heroicons" />
      <strong>Your changes have been saved </strong><br />
         You can safely exit the app now.
  </TerraAlert>
    <br />
    <TerraAlert variant="neutral" open>
    <TerraIcon slot="icon" name="outline-cog-8-tooth" library="heroicons" />
      <strong>Your settings have been updated</strong><br />
      Settings will take effect on next login.
  </TerraAlert>
  <br />
  <TerraAlert variant="warning" open>
    <TerraIcon slot="icon" name="outline-exclamation-triangle" library="heroicons" />
    <strong>Your session has ended</strong><br />
    Please login again to continue.
  </TerraAlert>
  <br />
  <TerraAlert variant="danger" open>
    <TerraIcon slot="icon" name="outline-shield-exclamation" library="heroicons" />
     <strong>Your account has been deleted</strong><br />
     We're very sorry to see you go!
  </TerraAlert>
  </>
);

Appearance

Set the appearance attribute to control the alert’s visual style. The default is "filled" which uses a colored background with white text (HDS style). Use "white" for a white background with a colored top border.

Filled Appearance (Default)

Primary
This is the HDS default style with a colored background.
Success
This is the HDS default style with a colored background.
Neutral
This is the HDS default style with a colored background.
Warning
This is the HDS default style with a colored background.
Danger
This is the HDS default style with a colored background. 
<terra-alert variant="primary" appearance="filled" open>
  <terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
  <strong>Primary</strong><br />
  This is the HDS default style with a colored background.
</terra-alert>
<br />
<terra-alert variant="success" appearance="filled" open>
  <terra-icon slot="icon" name="outline-check-circle" library="heroicons"></terra-icon>
  <strong>Success</strong><br />
  This is the HDS default style with a colored background.
</terra-alert>
<br />
<terra-alert variant="neutral" appearance="filled" open>
  <terra-icon slot="icon" name="outline-cog-8-tooth" library="heroicons"></terra-icon>
  <strong>Neutral</strong><br />
  This is the HDS default style with a colored background.
</terra-alert>
<br />
<terra-alert variant="warning" appearance="filled" open>
  <terra-icon slot="icon" name="outline-exclamation-triangle" library="heroicons"></terra-icon>
  <strong>Warning</strong><br />
  This is the HDS default style with a colored background.
</terra-alert>
<br />
<terra-alert variant="danger" appearance="filled" open>
  <terra-icon slot="icon" name="outline-shield-exclamation" library="heroicons"></terra-icon>
  <strong>Danger</strong><br />
  This is the HDS default style with a colored background.
</terra-alert>

import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const App = () => (
  <>
    <TerraAlert variant="primary" appearance="filled" open>
      <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
      <strong>Primary</strong>
      <br />
      This is the HDS default style with a colored background.
    </TerraAlert>
    <br />
    <TerraAlert variant="success" appearance="filled" open>
      <TerraIcon slot="icon" name="outline-check-circle" library="heroicons" />
      <strong>Success</strong>
      <br />
      This is the HDS default style with a colored background.
    </TerraAlert>
    <br />
    <TerraAlert variant="neutral" appearance="filled" open>
      <TerraIcon slot="icon" name="outline-cog-8-tooth" library="heroicons" />
      <strong>Neutral</strong>
      <br />
      This is the HDS default style with a colored background.
    </TerraAlert>
    <br />
    <TerraAlert variant="warning" appearance="filled" open>
      <TerraIcon slot="icon" name="outline-exclamation-triangle" library="heroicons" />
      <strong>Warning</strong>
      <br />
      This is the HDS default style with a colored background.
    </TerraAlert>
    <br />
    <TerraAlert variant="danger" appearance="filled" open>
      <TerraIcon slot="icon" name="outline-shield-exclamation" library="heroicons" />
      <strong>Danger</strong>
      <br />
      This is the HDS default style with a colored background.
    </TerraAlert>
  </>
);

White Appearance

Primary
This style uses a white background with a colored top border.
Success
This style uses a white background with a colored top border.
Neutral
This style uses a white background with a colored top border.
Warning
This style uses a white background with a colored top border.
Danger
This style uses a white background with a colored top border. 
<terra-alert variant="primary" appearance="white" open>
  <terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
  <strong>Primary</strong><br />
  This style uses a white background with a colored top border.
</terra-alert>
<br />
<terra-alert variant="success" appearance="white" open>
  <terra-icon slot="icon" name="outline-check-circle" library="heroicons"></terra-icon>
  <strong>Success</strong><br />
  This style uses a white background with a colored top border.
</terra-alert>
<br />
<terra-alert variant="neutral" appearance="white" open>
  <terra-icon slot="icon" name="outline-cog-8-tooth" library="heroicons"></terra-icon>
  <strong>Neutral</strong><br />
  This style uses a white background with a colored top border.
</terra-alert>
<br />
<terra-alert variant="warning" appearance="white" open>
  <terra-icon slot="icon" name="outline-exclamation-triangle" library="heroicons"></terra-icon>
  <strong>Warning</strong><br />
  This style uses a white background with a colored top border.
</terra-alert>
<br />
<terra-alert variant="danger" appearance="white" open>
  <terra-icon slot="icon" name="outline-shield-exclamation" library="heroicons"></terra-icon>
  <strong>Danger</strong><br />
  This style uses a white background with a colored top border.
</terra-alert>

import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const App = () => (
  <>
    <TerraAlert variant="primary" appearance="white" open>
      <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
      <strong>Primary</strong>
      <br />
      This style uses a white background with a colored top border.
    </TerraAlert>
    <br />
    <TerraAlert variant="success" appearance="white" open>
      <TerraIcon slot="icon" name="outline-check-circle" library="heroicons" />
      <strong>Success</strong>
      <br />
      This style uses a white background with a colored top border.
    </TerraAlert>
    <br />
    <TerraAlert variant="neutral" appearance="white" open>
      <TerraIcon slot="icon" name="outline-cog-8-tooth" library="heroicons" />
      <strong>Neutral</strong>
      <br />
      This style uses a white background with a colored top border.
    </TerraAlert>
    <br />
    <TerraAlert variant="warning" appearance="white" open>
      <TerraIcon slot="icon" name="outline-exclamation-triangle" library="heroicons" />
      <strong>Warning</strong>
      <br />
      This style uses a white background with a colored top border.
    </TerraAlert>
    <br />
    <TerraAlert variant="danger" appearance="white" open>
      <TerraIcon slot="icon" name="outline-shield-exclamation" library="heroicons" />
      <strong>Danger</strong>
      <br />
      This style uses a white background with a colored top border.
    </TerraAlert>
  </>
);

Closable

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

You can close this alert any time! 
<terra-alert variant="primary" open closable class="alert-closable">
<terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
  You can close this alert any time!
</terra-alert>

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

import { useState } from 'react';
import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const App = () => {
  const [open, setOpen] = useState(true);

  function handleHide() {
    setOpen(false);
    setTimeout(() => setOpen(true), 2000);
  }

  return (
    <TerraAlert open={open} closable onTerraAfterHide={handleHide}>
      <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
      You can close this alert any time!
    </TerraAlert>
  );
};

Without Icons

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

Nothing fancy here, just a simple alert. 
<terra-alert open>
  Nothing fancy here, just a simple alert.
</terra-alert>


import TerraAlert from '@nasa-terra/components/dist/react/alert';

const App = () => (
  <TerraAlert open>
    Nothing fancy here, just a simple alert.
  </TerraAlert>
);

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">
  <terra-button variant="primary">Show Alert</terra-button>

  <terra-alert variant="primary" duration="3000" closable>
    <terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
   This alert will automatically hide itself after three seconds, unless you interact with it.
  </terra-alert>
</div>

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

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

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

import { useState } from 'react';
import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraButton from '@nasa-terra/components/dist/react/button';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const css = `
  .alert-duration terra-alert {
    margin-top: var(--terra-spacing-medium);
  }
`;

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className="alert-duration">
        <TerraButton variant="primary" onClick={() => setOpen(true)}>
          Show Alert
        </TerraButton>

        <TerraAlert variant="primary" duration="3000" open={open} closable onTerraAfterHide={() => setOpen(false)}>
          <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
          This alert will automatically hide itself after three seconds, unless you interact with it.
        </TerraAlert>
      </div>

      <style>{css}</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">
  <terra-button variant="primary">Show Alert</terra-button>

  <terra-alert variant="primary" duration="10000" countdown="rtl" closable>
    <terra-icon slot="icon" name="outline-information-circle" library="heroicons"></terra-icon>
    You're not stuck, the alert will close after a pretty long duration.
  </terra-alert>
</div>

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

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

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

import { useState } from 'react';
import TerraAlert from '@nasa-terra/components/dist/react/alert';
import TerraButton from '@nasa-terra/components/dist/react/button';
import TerraIcon from '@nasa-terra/components/dist/react/icon';

const css = `
  .alert-duration terra-alert {
    margin-top: var(--terra-spacing-medium);
  }
`;

const App = () => {
  const [open, setOpen] = useState(false);

  return (
    <>
      <div className="alert-duration">
        <TerraButton variant="primary" onClick={() => setOpen(true)}>
          Show Alert
        </TerraButton>

        <TerraAlert variant="primary"  duration="10000" countdown="rtl" open={open} closable onTerraAfterHide={() => setOpen(false)}>
          <TerraIcon slot="icon" name="outline-information-circle" library="heroicons" />
           You're not stuck, the alert will close after a pretty long duration.
        </TerraAlert>
      </div>

      <style>{css}</style>
    </>
  );
};

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/alert/alert.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@nasa-terra/components@0.0.138/cdn/components/alert/alert.js';

To import this component using a bundler:

import '@nasa-terra/components/dist/components/alert/alert.js';

To import this component as a React component:

import TerraAlert from '@nasa-terra/components/dist/react/alert';

Slots

Name Description
(default) The alert’s main content.

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
closable Enables a close button that allows the user to dismiss the alert. boolean false
variant The alert’s theme variant. 'primary' | 'success' | 'neutral' | 'warning' | 'danger' 'primary'
appearance The alert’s appearance style. “filled” uses a colored background with white text (HDS default). “white” uses a white background with a colored top border and dark text. 'filled' | 'white' 'filled'
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' | undefined -
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
terra-show onTerraShow Emitted when the alert opens. -
terra-after-show onTerraAfterShow Emitted after the alert opens and all animations are complete. -
terra-hide onTerraHide Emitted when the alert closes. -
terra-after-hide onTerraAfterHide 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.

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.