Alert
An alert notifies users of important information or actions needed.
Published: Last updated:
Overview
Alerts are nondisruptive messages confined to a specific area of the UI. They communicate both task-generated and system-generated feedback, and remain visible until dismissed by the user or the issue is resolved. Alerts are often used alongside field-level messages, particularly for highlighting errors in forms or input areas.
When to use
Use an alert when you need to provide contextual feedback related to a specific task or UI element. Alerts are best suited for communicating the outcome of an action, drawing attention to important information, or highlighting errors that require user input. They should appear close to the relevant content to maintain clarity and reduce disruption to the overall user experience.
Default elements
Elements in an alert component, such as the icon, note, context bar, and close button are optional, with the exception of the message, which is required. The message is the core element that communicates the purpose of the alert, while the other elements can be used to provide additional context, reinforce meaning, or allow users to dismiss the alert.
Context bar
The context bar in an alert can be used to display supporting information such as brief labels, standalone links, or CTA buttons. Include it only when it provides meaningful context or utility, helping to support the alert without drawing attention away from its primary message.
Close button
Use the close button when the alert is dismissible and does not represent a persistent or critical system state. A dismissible alert indicates that the message is helpful but not essential for the user to act on immediately. In contrast, alerts without a close button should remain visible until the underlying condition has been resolved, such as a system error, signalling that the user must take action before the alert can be cleared. Use the close button only when it aligns with the alert’s importance and urgency.
Size
The width of alerts is flexible and adapts to the surrounding layout, expanding to fill the container or content area they’re associated with. The height is determined by the message content and should generally be limited to two lines to maintain clarity and avoid visual clutter.
Placement
Alerts should appear close to the content or element they relate to. They can expand to fill the width of their container and should align with the grid columns of the layout.
In forms, place alerts just above the primary action buttons, such as “Submit” or “Cancel”.
Deciding what to use
When selecting an alert status, consider both the context and the emotional tone of the message. Alerts are used to provide timely feedback or guidance, often in response to user actions or system events, and should clearly indicate the nature and importance of the information being conveyed.
Dismissal
Alerts do not dismiss automatically. They remain visible on the page until the user dismisses them or takes an action that resolves the alert.
A small “x” in the top right corner is used to dismiss alerts. Including the close button is optional and should be avoided if it’s critical for the user to read or respond to the alert before continuing.
Content
Alerts provide limited space for content, so messages should be clear, concise, and easy to scan. The user should be able to quickly understand the issue or update and identify any necessary actions without confusion.
Message
- The message should be concise and clearly communicate the most important information. For error alerts, explain what went wrong or why an action couldn’t be completed, for example, “Server instance unavailable.”
- Avoid using a full stop at the end of the message.
Note
- Keep notes brief; one or two short sentences is ideal.
- Avoid repeating or rephrasing the main message.
- Provide clear guidance on what the user should do next, this “user action” is especially important for error alerts and should always be included.
- Where appropriate, use actionable alerts and include links within the note that take users directly to the relevant place to address the issue.
Small note
- Use the small note to provide brief, supplementary details, such as reference numbers, short status updates, or passive context.
- Keep the text concise and ensure it is not essential to understanding the main alert message.
- Avoid repeating content from the main note or message.
- Do not include links or interactive elements in the small note.
- Use sparingly to maintain a clean and focused layout.
CTA button
- Labels should be clear and concise, typically no longer than one or two words.
- They should clearly indicate the action the user can take in response to the alert message.
Link
- Links in alerts should be descriptive and clearly indicate their destination or purpose.
- They may appear within the alert text or at the end, whichever feels more natural, provided their placement supports clarity and ease of use.
Overflow
If an alert requires a note longer than two or three lines, keep the visible message concise and include a “View more” link that directs the user to a full version of the alert. This link can open a more detailed page or a modal, depending on the context. This approach helps maintain a clear, focused layout without overwhelming the user.
Mouse
A user can close a dismissible alert by clicking the close x
Keyboard
Keyboard focus is given to the CTA button first. Users can press Tab to move between the CTA and the close x button. To dismiss the alert, press Enter or space while the close button has focus, or simply press Esc at any time.