Alert

Alert presents feedback or important information to users.

Basic Usage

To implement the Alert component, you need to import it first:

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

And use it:

<Alert>
  <strong>Hello!</strong> This is an alert.
</Alert>

See API for all available options.

General Guidelines

• Be simple and short and explain to users why you are interrupting them with an alert. Clearly say what happened or what is going to happen. Provide a brief title when the message is too long.

• Use icons to improve the accessibility of alerts because color may not be enough for everyone. See how.

Color Variants

All component colors are supported by alert to cover all possible needs of your project.

Success

Success alerts confirm that an operation has been processed successfully.

<Alert color="success">
  <strong>Success:</strong> Settings have been successfully saved.
</Alert>

Warning

Use warning alerts when a potentially unfavourable situation may occur. You may suggest an action to resolve the problem.

<Alert color="warning">
  <strong>Warning:</strong> Your credit card is going to expire soon.
  {' '}
  <a href="/">Update my payment options</a>
</Alert>

Danger

Danger alerts say there is something that block users from continuing that requires their immediate attention. The alert should offer a solution to the problem.

<Alert color="danger">
  <strong>Error:</strong> Cannot connect to the server. Is your internet
  connection working fine?
  {' '}
  <a href="/">Try again</a>
</Alert>

Help

This kind of alert can be used to display helpful information.

<Alert color="help">
  <strong>Help:</strong> You should choose a password you don&apos;t use
  anywhere else.
</Alert>

Info

Another common, informative alert.

<Alert color="info">
  <strong>Info:</strong> This feature depends on user&apos;s OS preferences.
</Alert>

Note (Default)

Neutral informative alert.

<Alert>
  <strong>Note:</strong> This feature may not be available in all regions.
</Alert>

Light

Light alert variant.

<docoff-placeholder dark>
  <Alert color="light">
    <strong>Light alert:</strong> Stands out on dark backgrounds.
  </Alert>
</docoff-placeholder>

Dark

Dark alert variant.

<Alert color="dark">
  <strong>Dark alert:</strong> Stands out on light backgrounds.
</Alert>

Alerts with Icons

An icon can (and should) accompany the message.

👉 Please note there are no icons pre-packed in React UI. Visit Icons to see how it works.

<Alert color="success" icon={<rui-icon icon="success" />}>
  <strong>Success:</strong> Settings have been successfully saved.
</Alert>

Dismissible Alerts

You can make an alert dismissible by providing a function that closes it on click on the close button:

React.createElement(() => {
  const [isAlertVisible, setIsAlertVisible] = React.useState(true);

  if (isAlertVisible) {
    return (
      <Alert
        color="success"
        icon={<rui-icon icon="success" />}
        onClose={() => setIsAlertVisible(false)}
      >
        <strong>Success:</strong> Settings have been successfully saved.
      </Alert>
    );
  }

  return (
    <Button
      label="Bring the alert back!"
      onClick={() => setIsAlertVisible(true)}
    />
  );
});

Forwarding HTML Attributes

In addition to the options below in the component's API section, you can specify any HTML attribute you like. All attributes that don't interfere with the API of the React component are forwarded to the root <div> HTML element. This enables making the component interactive and helps to improve its accessibility.

👉 For the full list of supported attributes refer to:

• <div> HTML element attributes
• React common props

API

Theming

Common Theming Options

Custom Property	Description
--rui-Alert__padding	Padding between border and message
--rui-Alert__font-weight	Message font weight
--rui-Alert__border-width	Border width
--rui-Alert__border-radius	Corner radius
--rui-Alert__emphasis__font-weight	Font weight of text emphasised with <strong>
--rui-Alert__stripe__width	Width of the border at the start of the Alert

Theming Variants

It's possible to adjust the theme of specific alert color variant. Naming convention looks as follows:

--rui-Alert--<COLOR>__<PROPERTY>

Where:

• <COLOR> is one of supported component colors (see alert color variants and API),
• <PROPERTY> is one of color (color of text), foreground-color (color of border, icon, links, and emphasis), or background-color.