Alert
Alert banners are used to convey important information or warnings to users.
Last updated
Alert banners are used to convey important information or warnings to users.
Last updated
Alert banners are used to communicate critical information, warnings, or updates that require the user’s attention. They are ideal for displaying system messages, error notifications, success confirmations, and other significant alerts.
An alert banner component typically includes a message and may also feature optional elements like icons, titles, and action buttons. Alert banners are usually displayed prominently at the top of the interface or within a designated alert area to ensure visibility. They can appear in different states—such as success, warning, error, or information—to reflect the nature of the message.
button_text
Text for a button inside the alert
string
clickHandler
A custom click event handler for the close button.
(event: MouseEvent) => void
component_id
An optional identifier for the component, useful for tracking or debugging.
string
component_mode
Provides a way to define specific component behavior or appearance (e.g., dark mode or compact mode).
string
custom_class
Allows adding a custom CSS class for additional styling.
string
description
A short description or message displayed in the alert.
string
first_link
URL for the first action button inside the alert. (Optional)
string
second_link
URL for the second action button inside the alert. (optional)
string
title_text
The main title or heading displayed in the alert.
string
type
Defines the primary or secondary style variation of the alert.
"primary" | "secondary"
variation
Specifies the alert type, which affects the visual styling.
"error" | "info" | "success" | "warning"
button_name
Name attribute for the close button
string
Lead Icon: Positioned to the left of the alert title, the lead icon provides a visual cue about the nature of the alert (e.g., information, warning, or error). This icon helps users quickly recognize the alert type, enhancing clarity.
Title: The main label for the alert, summarizing the purpose of the message. It provides a clear and concise headline, drawing attention to the alert's content.
Message Body: Located below the title, the message body contains additional information or details about the alert. This text provides context, helping users understand the specifics of the alert.
Close Icon: Positioned in the top right corner, the close icon allows users to dismiss the alert. This feature provides users with control over the visibility of the alert, making it dismissible when no longer needed.
Primary Button: A prominent action button within the alert, often used for the main call-to-action related to the alert. It encourages users to take the primary action required by the alert message.
Secondary Button: A secondary action button that offers an alternative choice or a less critical action. Positioned next to the primary button, it gives users an additional option for interaction.
Use alert banners to display important messages that require immediate user attention.
Don't use alert banners for non-critical information that doesn't require immediate action.
Label the alert banner clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for alert banners.
Include an icon to visually represent the type of alert (e.g., error, warning, success).
Don't overcrowd the alert banner with too many elements.
Ensure the alert banner is large enough to be easily noticeable.
Don't make the alert banner too small or easy to overlook.
Provide clear action buttons if the alert requires user interaction.
Don't include action buttons if the alert does not require any user action.
Use appropriate colors to differentiate between types of alerts.
Don't rely solely on color to convey the message; include text as well.
Ensure alert banners are dismissible if they are not critical.
Don't force users to dismiss critical alerts manually.
Keep consistent styling and spacing across all alert banners in the application.
Don't use inconsistent styles that may confuse users.
