# Scoped Notification

<figure><img src="/files/28nirwDye2BlOFD0uEzL" alt="" width="375"><figcaption></figcaption></figure>

***

## 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.&#x20;

### 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.

{% tabs %}
{% tab title="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
  {% endtab %}

{% tab title="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
  {% endtab %}

{% tab title="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.
{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.avonnicomponents.com/flow/flow-components/scoped-notification.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.