Scoped Notification

The Avonni Scoped Notification displays notification messages to users with an optional action

---

Configuring the Scoped Notification

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

Icon Customization