React UI
Edit page
Home
Getting Started
Customize
Foundation
Components: UI
Alert
Basic Usage General Guidelines Alert Types Alerts with Icons Dismissible Alerts API Badge Button ButtonGroup Card CheckboxField Modal Radio ScrollView SelectField Table TextArea TextField Toggle
Components: Layouts
CSS Helpers
Readme

# 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:

Hello!
<Alert>Hello!</Alert>

    <Alert>Hello!</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.

## Alert Types

There are six types of alerts (matching all available UI colors) to cover all possible needs of your project: note, success, warning, error, help, and info.

### Note (default)

When no type is specified, a neutral informative alert appears:

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

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

### Success

Success alerts confirm that an operation has been processed successfully.

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

    <Alert type="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.

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

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

### Error

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

Error: Cannot connect to the server. Is your internet connection working fine? Try again
<Alert type="error"> <strong>Error:</strong> Cannot connect to the server. Is your internet connection working fine? <a href="/">Try again</a> </Alert>

    <Alert type="error">  <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.

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

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

### Info

Another common, informative alert.

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

    <Alert type="info">  <strong>Info:</strong> This feature depends on user&apos;s OS preferences.</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.

Success: Settings have been successfully saved.
<Alert type="success" icon={<Icon icon="success" />}> <strong>Success:</strong> Settings have been successfully saved. </Alert>

    <Alert type="success" icon={<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:

Success: Settings have been successfully saved.
() => { const [isAlertVisible, setIsAlertVisible] = React.useState(true) return ( <> {isAlertVisible ? ( <Alert type="success" icon={<Icon icon="success" />} closeHandler={() => setIsAlertVisible(false)} > <strong>Success:</strong> Settings have been successfully saved. </Alert> ) : ( <Button clickHandler={() => setIsAlertVisible(true)} label="Show alert" /> )} </> ) }

    () => {  const [isAlertVisible, setIsAlertVisible] = React.useState(true)  return (    <>      {isAlertVisible ? (        <Alert          type="success"          icon={<Icon icon="success" />}          closeHandler={() => setIsAlertVisible(false)}        >          <strong>Success:</strong> Settings have been successfully saved.        </Alert>      ) : (        <Button          clickHandler={() => setIsAlertVisible(true)}          label="Show alert"        />      )}    </>  )}

## API

children
node
required
closeHandler
func
null
icon
node
null
id
string
undefined
translations
{ "close": "string" }
required
type
'error' │ 'help' │ 'info' │ 'note' │ 'success' │ 'warning'
'note'

Next: Badge →