Edit page


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:

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 alerts confirm that an operation has been processed successfully.


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


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.


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


Another common, informative alert.

Note (Default)

Neutral informative alert.


Light alert variant.


Dark alert variant.

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.

Dismissible Alerts

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

Forwarding HTML Attributes

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

👉 Refer to the MDN reference for the full list of supported attributes of the div element.


Prop nameTypeDefaultRequiredDescription

Alert body.

color'success' │ 'warning' │ 'danger' │ 'help' │ 'info' │ 'note' │ 'light' │ 'dark''note'false

Color variant to clarify importance and meaning of the alert.


Optional element to be displayed next to the alert body.


ID of the root HTML element.

Also serves as base for ids of nested elements:

  • <ID>__close
  • <ID>__content

Function to call when the close button is clicked. If not provided, close buttons will be hidden.


Common Theming Options

Custom PropertyDescription
--rui-Alert__paddingPadding between border and message
--rui-Alert__font-weightMessage font weight
--rui-Alert__border-widthBorder width
--rui-Alert__border-radiusCorner radius
--rui-Alert__emphasis__font-weightFont weight of text emphasised with <strong>
--rui-Alert__stripe__widthWidth 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:



  • <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.