Alerts

The Alert component is designed to deliver system information to users in an explicit and noticeable manner. It supports various use cases including feedback delivery, warnings, and error reporting, with display options ranging from standalone messages to inline form validation feedback.

Working in progress

This component is still under development. It is not yet available in releases of Atlas.

Overview

When to use Alert

Use the Alert component to display system feedback, respond to user actions, or provide information. Use inline Alert to provide feedback on form input validation.
Depending on the type of feedback conveyed to the user, Alerts can be used to communicate one of four statuses:

• Info
  Use to provide general, neutral, and non-urgent information or recommendations.
• Warning
  Use to provide important information about situations that require caution.
• Error
  Use to alert the user only in situations that require immediate attention. Error Alerts have the strongest visual priority among all system messages.
• Success
  Use to provide feedback about a successful user interaction, such as publishing an article.

Note:

When recommending against using a component, always suggest alternative components to guide users effectively.

About Alerts

Alerts includes the following elements.

Icon

Icons enhance user recognition and allow for more concise messaging. Each message type (e.g., "success") is paired with a distinct icon to ensure quick identification.

Alert Text

The alert text should be as clear and concise as possible, providing feedback to users. If applicable, it may also suggest next steps.

Keep messages short and simple, offering one or two solutions to reduce cognitive load.

• Do: Concise & Accessible: Incorporate various text formats and links within the message text as needed.
• Don't: Avoid bolding the entire message text.

Close button (optional)

To allow the message to be dismissed, an optional icon-only quiet button can be included.

Examples

Fade in

A transition effect can be applied when a Alert is dynamically added to the user interface.

Dismiss button

• Alerts can be dismissed using the close button within the Alert component. Note that inline messages cannot be dismissed.

Auto-dismiss

Alerts can be auto-dismissable. Auto-dismiss can be used with or without the manual dismiss button.

• Do: Use for very short Alerts to ensure that they can be read and understood before disappearing.
• Don't: Avoid using with error Alerts to prevent the message from disappearing before users fix the error.

Multiline

Alerts can be dismissed using the close button within the Alert component. Note that inline messages cannot be dismissed.

With custom icon

Only info Alerts may have a custom icon.

Technical implementation

Props

Prop Name	Description	Type	Values	Default
type	Defines the alert type, which determines the visual style and purpose.	'inline' or 'box'	'inline', 'box'	'box'
state	Indicates the status or severity of the message.	string	'info', 'warning', 'error', 'success'	'info'
close	Whether the alert can be dismissed by the user (adds a close/dismiss button).	boolean	—	false
title	Toggles whether the alert displays a title.	boolean	—	true
titleText	The text content for the alert’s title (only shown if title is true).	string	—	'Title'

Extended Props (Optional Enhancements)

Prop Name	Description	Type	Values	Default
icon	Allows replacing the default icon. Typically used only for 'notice' type.	string (icon name)	—	null
fadeIn	Enables a fade-in transition effect when the alert appears. Useful for dynamically loaded alerts.	boolean	—	false
allowUserDismiss	Adds a dismiss (close) button, allowing the user to manually remove the alert.	boolean	—	false
dismissButtonLabel	Accessible label for the dismiss button (screen reader text). If omitted, defaults to 'Close'.	string	—	''
autoDismiss	Enables automatic dismissal after a period. Accepts true (default 4000ms) or a custom duration in milliseconds. Note: Not available if state is 'error'.	boolean or number	—	false

Keyboard navigation

Key	Function
Enter	When the Message is closable and the focus is placed on its close button, it closes the Message. If the focus is placed on a link within the Message, it activates the link.