Scoped Notification

Serve advisory information for the user that is not important to justify an alert.

What the Avonni Scoped Notification does

The Scoped Notification component is a user interface element that displays a notification message to users. It is commonly used to alert users to important information or updates. The component consists of a notification message and an optional action button.

---

Changing the Properties

Adding Title and Content

The Scoped Notification displays a message for the end-user. This message can be set by typing a title and some content text.

Adding an icon

An icon can be added to your scoped notification message to illustrate your content. Adding an icon is optional.

Choosing a Variant

A variant defines a color theme for the scoped notification:

• Base: gray

• Error: red

• Dark: dark gray

• Success: green

• Warning: yellow

---

Adding Interactions

No interactions are available.

---

Styling

Scoped Notifications provide contextual feedback within your application. Avonni gives you extensive control over their appearance to ensure they integrate seamlessly with your design. Here's how you can customize them.

Layout and Spacing

• Margin: Fine-tune the spacing around the notification to position it within its surrounding content perfectly.

• Padding: Adjust the notification's inner spacing to control the message's layout and visual comfort.

• Size: Define a maximum width for the notification to maintain a consistent and readable appearance, especially for longer messages

Variant Styles

Scoped Notifications come with several built-in variants to convey different levels of urgency or meaning. Customize each variant to match your application's style guide:

• Base: Style the default appearance of the notification, which serves as the foundation for other variants.

• Error: Create a visually distinctive style for error notifications, typically using red colors to signal problems.

• Dark: Design a dark-themed notification variant, suitable for applications with darker backgrounds.

• Success: Style success notifications with green colors or other visual cues to indicate successful operations.

• Warning: Customize warning notifications, often using yellow or orange colors to draw attention to potential issues

Icon Customization

Icon Border Radius: If you include an icon within your notification, you can adjust the border radius to create rounded or square icons.