Alert

Overview

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.

Settings

🎛️ Properties

Attribute	Description
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.

🎨 Styling

Attribute	Description
Spacing	The spacing styling setting in the Avonni Alert component lets you adjust margins: Block Start: Set the top margin. Block End: Adjust the bottom margin. Inline Start: Configure the left margin. Inline End: Modify the right margin
Background	The background styling setting in the Avonni Alert component provides backdrop customization: Color: Select a solid color for the background. Linear Gradient: Choose this option for a dynamic, visually appealing gradient effect
Text	The text styling setting in the Avonni Alert component allows for text customization: Color: Change the text color for improved visibility. Font Weight: Choose the weight of the font for emphasis. Horizontal Alignment: Select the text's alignment for optimal display in the alert
Border	The border styling setting in the Avonni Alert component offers options to customize the border's appearance: Color: Choose a color for the border's edge. Size: Select the thickness of the border. Style: Determine the overall look and feel with various styles
Icon	The icon styling setting in the Avonni Alert component allows for various customizations of the icon's appearance: Background Color: Alter the background color behind the icon. Foreground Color: Change the main color of the icon. Foreground Close Icon: Specify the icon's color to close the alert. Foreground Color Utility: Make further color adjustments for better visibility and contrast

some styling attributes can dynamic....