Alert

Alert displays a brief message in a way that attracts the user’s attention without interrupting their task.

ARIA pattern Theme source React source Feedback

Usage note: The Alert component has an ARIA alert role by default which has some accessibility implications.

Demo

Usage

Import the Alert component and styles.

Default Alert

import { Alert } from '@aws-amplify/ui-react';

export const DefaultAlertExample = () => {
  return <Alert>Default Alert</Alert>;
};

Variations

Use the variation prop to change the Alert variation. Available options are info, error, warning, success, and none (default).

Info

Error

Warning

Success

Default

import { Alert } from '@aws-amplify/ui-react';

export const AlertVariationsExample = () => {
  return (
    <>
      <Alert variation="info">Info</Alert>
      <Alert variation="error">Error</Alert>
      <Alert variation="warning">Warning</Alert>
      <Alert variation="success">Success</Alert>
      <Alert>Default</Alert>
    </>
  );
};

Heading

Use the heading prop to pass a heading to the Alert.

This Alert does not have a heading

This is the heading

Cool heading!

import { Alert } from '@aws-amplify/ui-react';

export const AlertHeadingExample = () => {
  return (
    <>
      <Alert variation="warning">This Alert does not have a heading</Alert>
      <Alert variation="success" heading="This is the heading">
        Cool heading!
      </Alert>
    </>
  );
};

Icon

Use the hasIcon prop to change whether the Alert includes an icon. Defaults to true (includes icon).

This Alert shows an icon by default

This Alert does not have an icon

import { Alert } from '@aws-amplify/ui-react';

export const AlertIconExample = () => {
  return (
    <>
      <Alert variation="info">This Alert shows an icon by default</Alert>
      <Alert variation="error" hasIcon={false}>
        This Alert does not have an icon
      </Alert>
    </>
  );
};

Dismissible

Use the isDismissible prop to control whether the user can dismiss the Alert. Defaults to false (not dismissible).

This Alert is not dismissible by default

Click the X to dismiss this Alert

import { Alert } from '@aws-amplify/ui-react';

export const DismissibleAlertExample = () => {
  return (
    <>
      <Alert>This Alert is not dismissible by default</Alert>
      <Alert isDismissible={true}>Click the X to dismiss this Alert</Alert>
    </>
  );
};

onDismiss

Use the onDismiss prop to pass a function that will run when the Alert is dismissed. Note that isDismissible must be set to true.

Run a function on dismiss (click the X)

import { Alert } from '@aws-amplify/ui-react';

export const OnDismissAlertExample = () => {
  return (
    <Alert
      onDismiss={() => alert('Alert dismissed, user metric recorded')}
      isDismissible={true}
    >
      Run a function on dismiss (click the X)
    </Alert>
  );
};

Styling

Theme

You can customize the appearance of all Alert components in your application with a Theme.

Alert Theme Source

Default alert title

Hello

Info

Here is some info

Success

Hooray!

import { Alert, Flex, ThemeProvider, Theme } from '@aws-amplify/ui-react';

const theme: Theme = {
  name: 'alert-theme',
  tokens: {
    components: {
      alert: {
        // Default styles
        backgroundColor: { value: '{colors.teal.20}' },

        icon: {
          size: { value: '{fontSizes.xxxl}' },
        },

        heading: {
          fontSize: { value: '{fontSizes.large}' },
          fontWeight: { value: '{fontWeights.normal}' },
        },

        // Variations
        info: {
          color: { value: 'white' },
          backgroundColor: { value: '{colors.blue.80}' },
        },

        success: {
          color: { value: 'black' },
          backgroundColor: { value: '{colors.yellow.40}' },
        },
      },
    },
  },
};

export const AlertThemeExample = () => (
  <ThemeProvider theme={theme} colorMode="light">
    <Flex direction="column">
      <Alert heading="Default alert title">Hello</Alert>
      <Alert variation="info" heading="Info">
        Here is some info
      </Alert>
      <Alert variation="success" heading="Success">
        Hooray!
      </Alert>
    </Flex>
  </ThemeProvider>
);

Icons

Info

Here is some info

Success

Hooray!

Warning

Error

import { Alert, Flex, IconsProvider } from '@aws-amplify/ui-react';
import {
  FcMediumPriority,
  FcHighPriority,
  FcInfo,
  FcOk,
  FcMinus,
} from 'react-icons/fc';

export const AlertIconProviderExample = () => (
  <IconsProvider
    icons={{
      alert: {
        info: <FcInfo />,
        success: <FcOk />,
        error: <FcHighPriority />,
        warning: <FcMediumPriority />,
        close: <FcMinus />,
      },
    }}
  >
    <Flex direction="column">
      <Alert variation="info" heading="Info">
        Here is some info
      </Alert>
      <Alert variation="success" heading="Success" isDismissible>
        Hooray!
      </Alert>
      <Alert variation="warning" heading="Warning" />
      <Alert variation="error" heading="Error" />
    </Flex>
  </IconsProvider>
);

Target classes

Class	Description
`amplify-alert`	Top level element that wraps the Alert primitive
`amplify-alert__icon`	Class applied to Icon component within the Alert primitive
`amplify-alert__heading`	Class applied to the heading View
`amplify-alert__body`	Class applied to the body View
`amplify-alert__dismiss`	Class applied to the close Button

--amplify-components-alert-align-items
--amplify-components-alert-background-color
--amplify-components-alert-color
--amplify-components-alert-error-background-color
--amplify-components-alert-error-color
--amplify-components-alert-heading-font-size
--amplify-components-alert-heading-font-weight
--amplify-components-alert-icon-size
--amplify-components-alert-info-background-color
--amplify-components-alert-info-color
--amplify-components-alert-justify-content
--amplify-components-alert-padding-block
--amplify-components-alert-padding-inline
--amplify-components-alert-success-background-color
--amplify-components-alert-success-color
--amplify-components-alert-warning-background-color
--amplify-components-alert-warning-color

Global styling

To override styling on all Alerts, you can set the Amplify CSS variables or use the built-in .amplify-alert class.

Change the default Alert to yellow

/* styles.css */
:root {
  --amplify-components-alert-background-color: yellow;
}
/* OR */
.amplify-alert {
  background-color: yellow;
}

To replace the Alert styling, unset it:

.amplify-alert {
  all: unset;
  /* Add your styling here*/
}

Local styling

To override styling on a specific Alert, you can use (in order of increasing specificity): a class selector, data attributes, or style props.

Using a class selector:

Attention

This is a purple Alert

/* styles.css */
.purple-alert {
  color: white;
  background-color: rebeccapurple;
}

import './styles.css';

<Alert className="purple-alert" heading="Attention">
  This is a purple Alert
</Alert>;

Using data attributes:

System Error

Red Alert!

Default Alert styling unaffected

/* styles.css */
/* Override only error variation styles */
.amplify-alert[data-variation='error'] {
  color: white;
  background-color: crimson;
}

import './styles.css';

<Alert variation="error" heading="System Error">Red Alert!</Alert>
<Alert>Default Alert styling unaffected</Alert>

Using style props:

Passing props directly

import { Alert, useTheme } from '@aws-amplify/ui-react';

export const AlertStylePropsExample = () => {
  const { tokens } = useTheme();

  return (
    <Alert
      backgroundColor={tokens.colors.primary[10]}
      color={tokens.colors.font.primary}
      fontWeight="bold"
      border={`${tokens.borderWidths.large} solid ${tokens.colors.primary[80]}`}
      borderRadius="10px"
    >
      Passing props directly
    </Alert>
  );
};

Accessibility

The Alert component in Amplify UI has the alert role by default. The alert role is an assertive live region which means any changes to the content of the Alert or adding the Alert dynamically to the DOM will cause the Alert to be announced by a screen reader. This can be disruptive to screen reader users, so it is best used sparingly and only when the Alert content requires the user's immediate attention.

Please see the ARIA Authoring Practices Guide for the alert role for more information and use cases.

Dynamic Alert

The following code shows an example of dynamically displaying an Alert. A screenreader will announce the content of the Alert when it is visible.

import { Flex, Button, Alert } from '@aws-amplify/ui-react';
import { useState } from 'react';

export const AccessibleAlert = () => {
  const [isAlertVisible, setIsAlertVisible] = useState(false);

  return (
    <Flex direction="column">
      <Button onClick={() => setIsAlertVisible(!isAlertVisible)}>
        Toggle Alert
      </Button>
      {isAlertVisible ? (
        <Alert variation="error">This is an example alert.</Alert>
      ) : null}
    </Flex>
  );
};

Role override

If you're displaying information that isn't critical or time sensitive, and only want the visual style of the Alert component without the accessibility side effects, you can override the role attribute like in the following example:

This alert will not be announced to screen readers if dyamically added to the DOM.

import { Alert } from '@aws-amplify/ui-react';

export const RoleOverride = () => {
  return (
    <Alert role="none" variation="info">
      This alert will not be announced to screen readers if dyamically added to
      the DOM.
    </Alert>
  );
};

Custom aria label

You can configure a custom aria-label for the dismiss button using the dismissButtonLabel prop (defaults to 'Dismiss alert').

Configure a custom aria label for the dismiss button

import { Alert } from '@aws-amplify/ui-react';

export const DismissButtonLabelExample = () => {
  return (
    <Alert dismissButtonLabel="Custom dismiss button label" isDismissible>
      Configure a custom aria label for the dismiss button
    </Alert>
  );
};