# Scope Notification

## **Setting Up Your Scoped Notification**

### **Adding Title and Content**

* **Craft your message:**
  * **Title:** Provide a concise and informative title for your notification.
  * **Content Text:** Enter the main message you want to convey to the user.

### **Adding an Icon (Optional)**

* **Enhance your message with a visual cue:**
  * Choose an icon that complements the notification's content and purpose.

### **Choosing a Variant**

* **Set the color theme:**
  * **Base:** Neutral gray.
  * **Error:** Red, for critical messages or errors.
  * **Dark:** Dark gray, for a more subtle appearance.
  * **Success:** Green, for positive feedback or successful actions.
  * **Warning:** Yellow, for cautionary messages or alerts.

## **Styling Your Scoped Notification**

* **Fine-tune the appearance:**
  * **Layout and Spacing:**
    * **Margin:** Control the spacing around the notification to position it correctly.
    * **Padding:** Adjust the inner spacing to fine-tune the layout and visual comfort.
    * **Size:** Set a maximum width to maintain a consistent appearance, especially for longer messages.
  * **Variant Styles:** Customize the colors and styles associated with each variant (base, error, dark, success, warning).
  * **Icon Customization:** Adjust the icon's size, color, and position.

## **No Interactions**

The Scoped Notification component is primarily a visual element for displaying information, so it has no interactive features or actions.


---

# 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/dynamic-components/components/scope-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.