Alert presents feedback or important information to users.
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.
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.
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.
Neutral informative alert.
Light alert variant.
Dark alert variant.
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.
You can make an alert dismissible by providing a function that closes it on click on the close button:
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 name | Type | Default | Required | Description |
|---|---|---|---|---|
| children | node | — | true | Alert body. |
| color | 'success' │ 'warning' │ 'danger' │ 'help' │ 'info' │ 'note' │ 'light' │ 'dark' | 'note' | false | Color variant to clarify importance and meaning of the alert. |
| icon | node | null | false | Optional element to be displayed next to the alert body. |
| id | string | undefined | false | ID of the root HTML element. Also serves as base for ids of nested elements:
|
| onClose | func | null | false | Function to call when the close button is clicked. If not provided, close buttons will be hidden. |
| 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 |
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.