Edit page

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:

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.

Primary

Primary alert uses brand primary color.

Secondary

Secondary alert uses brand secondary color.

Success

Success alerts confirm that an operation has been processed successfully.

Warning

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

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.

Help

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

Info

Another common, informative alert.

Note (Default)

Neutral informative alert.

Light

Light alert variant.

Dark

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.

API

Prop nameTypeDefaultRequiredDescription
childrennodetrue

Alert body.

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

Color variant to clarify importance and meaning of the alert.

iconnodenullfalse

Optional element to be displayed next to the alert body.

idstringundefinedfalse

ID of the root HTML element.

Also serves as base for ids of nested elements:

  • <ID>__close
  • <ID>__content
onClosefuncnullfalse

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

Theming

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:

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