Alert
Last updated
Was this helpful?
Last updated
Was this helpful?
The Avonni Alert Component lets you showcase crucial messages or notifications to your website visitors. Commonly, it's employed to inform visitors about specific situations like errors, warnings, or successful actions. It's an effective way to relay essential details or guidelines to your audience.
Variant
The 'variant' attribute allows you to customize the appearance of the Avonni Alert component to reflect better the type of alert you're conveying. Available variants include:
error: For critical notifications or issues.
base: A standard, general-purpose alert.
offline: Indicates connectivity or availability concerns.
warning: For alerts that need attention but aren't critical.
Choose a variant that aligns with the message you aim to deliver for more transparent user comprehension.
Content
The 'content' attribute specifies the primary message or information you wish to convey in the Avonni Alert component. It holds the textual content that will be displayed within the alert, ensuring users are informed or made aware of the specific notification or situation.
Icon Name
The 'icon name' attribute allows you to set a specific icon for the Avonni Alert component. By providing an icon name, you can visually represent the nature or context of the alert, enhancing clarity and immediately drawing the user's attention to the message.
Icon Size
The 'icon size' attribute in the Avonni Alert component controls the icon's size:
Xxs: Extra-extra-small for subtle emphasis.
Xs: Extra-small for minimal prominence.
Small: A modest size for moderate visibility.
Medium: Standard size for balanced visibility.
Large: For maximum visual impact
Is Dismissible
The "Is Dismissible" attribute enables users to close or dismiss the Avonni Alert on the interface. When activated, a close button appears on the alert, allowing for manual removal by the user.
