Alert

An alert displays a short but important message, without interrupting the user's task.

Severities

The alert component offers four severity levels that set a distinctive icon and color. The icon and color convey the meaning of the alert.

<Alert severity='error'>Test Alert</Alert>
<Alert severity='info'>Test Alert</Alert>
<Alert severity='success'>Test Alert</Alert>
<Alert severity='warning'>Test Alert</Alert>

<Alert severity='error'>Test Alert</Alert>
<Alert severity='info'>Test Alert</Alert>
<Alert severity='success'>Test Alert</Alert>
<Alert severity='warning'>Test Alert</Alert>

<Alert severity="error">
  Test Alert
</Alert>
<Alert severity="info">
  Test Alert
</Alert>
<Alert severity="success">
  Test Alert
</Alert>
<Alert severity="warning">
  Test Alert
</Alert>

Icons

By default, the icon of the alert will be derived based on the severity prop. This icon can be overwritten by providing a icon prop.

<Alert severity='success' iconName='UserIcon' iconVariant='solid'>
  Test Alert
</Alert>

<Alert
  severity="success"
  iconName="UserIcon"
  iconVariant="solid"
>
  Test Alert
</Alert>

<Alert
  severity="success"
  iconName="UserIcon"
  iconVariant="solid"
>
  Test Alert
</Alert>

Close Button

The alert can be closed by the user, if you provide an onClose prop.

function Example() {
  const handleClose = () => {
    window.alert('The close button has been clicked.');
  };
  
  return (
    <Alert severity='success' onClose={handleClose}>
      Test Alert
    </Alert>
  );
}

function Example() {
  const handleClose = () => {
    window.alert('The close button has been clicked.');
  };
  
  return (
    <Alert severity='success' onClose={handleClose}>
      Test Alert
    </Alert>
  );
}

function Example() {
  const handleClose =
    () => {
      window.alert(
        'The close button has been clicked.'
      );
    };

  return (
    <Alert
      severity="success"
      onClose={handleClose}
    >
      Test Alert
    </Alert>
  );
}

Accessibility

When the alert is displayed on the screen, it will automatically be announced by most screen readers.

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text.

Actions within the alert, such as the close button, must have a tabIndex of 0 so that they can be reached by keyboard-only users.

API