Alert

The Alert component informs users of change in the underlying system; user interaction or a change in application state can surface the component.

Alert has three variations ensure it covers multiple interaction patterns: success, warning, and error.

Usage

Import the Alert component into a React component in your project:

import {Alert} from 'demo-library';

Use Alert by passing children:

import React from 'react';
import {Alert} from 'demo-library';
export const MyComponent: React.FC<any> = () => {
  return (
    <div>
      <p>Uh-oh<p>
      <Alert>
        <strong>Warning:</strong>
        This is a cautionary alert.
      </Alert>
    </div>
  );
}

Variants

Alert comes with three variations, which are set via the variant property.

Success

Use to signify a positive or successful interaction. This is the default Alert.

Success! This is a positive alert.

<Alert variant="success">
  <strong>Success!</strong> This is a positive alert.
</Alert>

<Alert variant="success">
  <strong>Success!</strong> This is a positive alert.
</Alert>

Warning

Use to indicate bring awareness of a non-critical, potentially negative information.

Warning: This is a cautionary alert.

<Alert variant="warning">
  <strong>Warning:</strong> This is a cautionary alert.
</Alert>

<Alert variant="warning">
  <strong>Warning:</strong> This is a cautionary alert.
</Alert>

Error

Use to convey a negative or errorful interaction or state.

Error! This is a negative alert.

<Alert variant="error">
  <strong>Error!</strong> This is a negative alert.
</Alert>

<Alert variant="error">
  <strong>Error!</strong> This is a negative alert.
</Alert>

Closeable

Pass an onClose property to the Alert to display a close button:

This alert is closeable.

<Alert onClose={console.log} variant="warning">
  This alert is closeable.
</Alert>

<Alert onClose={console.log} variant="warning">
  This alert is closeable.
</Alert>

The Alert component has a focusButton method that will call HTMLElement.focus() on the button.

Accessibility

The Alert component has a role="alert" property, which covers the WCAG requirement.

"Using the alert role" on MDN ↗

Component API

Props

Name	Type	Default value	Description	Required?
`onClose`	`((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) \| undefined`		`Alert` displays a close button when this property is passed. Response to user-initiated closes by adding an event handler.	No
`variant`	`"success" \| "error" \| "warning" \| undefined`	`success`	The alert's visual variant, representing the meaning of the alert.	No

Methods

Name	Description	Parameters	Return type
`focusButton`	Focus the Alert's button if present.	`options?: FocusOptions \| undefined`	`void`