> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/dynamic-components/components/scope-notification.md).

# Scoped Notification

The Avonni Scoped Notification component displays contextual messages and feedback within a page section. Use it to guide or inform users with a title, rich content, and a color-coded variant that signals the nature of the message.

## Overview

Scoped Notification is a purely visual component — it carries a message but does not respond to user interaction. Place it anywhere on the canvas to surface inline alerts, tips, or status feedback alongside other components.

## Configuration

To configure the Scoped Notification, select it on the canvas. The **Edit Scoped Notification** panel opens on the right with two tabs: **Properties** and **Style**. The sections below mirror the Properties tab from top to bottom.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F6eUnfJPj1UCkjPQtdgVY%2Fscope-notification-builder-properties.png?alt=media" alt="" width="320"><figcaption><p>The Properties tab of the Edit Scoped Notification panel.</p></figcaption></figure>

### Properties

#### Title

The title is displayed in the header of the notification. Enter a concise label that summarizes the message.

#### Content

The main body of the notification. Supports rich text so you can include formatting, links, or emphasis alongside the core message.

#### Variant

Sets the color theme of the notification to communicate its purpose at a glance. Default is **Base**.

| Variant     | Color        | When to use                             |
| ----------- | ------------ | --------------------------------------- |
| **Base**    | Neutral gray | General information or neutral feedback |
| **Dark**    | Dark gray    | Subtle, low-emphasis messages           |
| **Error**   | Red          | Critical issues or error conditions     |
| **Success** | Green        | Positive feedback or successful actions |
| **Warning** | Yellow       | Cautionary messages or alerts           |

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F9EES1lDf7z6MSrnOitUu%2Fscope-notification-variant.png?alt=media" alt=""><figcaption><p>The five variants, each with an icon that suits its message.</p></figcaption></figure>

#### Icon Name

Optionally add a Lightning Design System icon to reinforce the notification's meaning visually. Enter the SLDS icon name (for example, `utility:info`).

#### Icon Size

Controls the size of the icon. Available when **Icon Name** is set. Default is **Medium**.

Options: **Xxs**, **Xs**, **Small**, **Medium**, **Large**.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FF4QRsRfG9j4HClhAcIkc%2Fscope-notification-icon-size.png?alt=media" alt=""><figcaption><p>The five icon sizes, on the same notification.</p></figcaption></figure>

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Styling

Configure the Scoped Notification's appearance from the **Style** tab of the Edit Scoped Notification panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the component.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.

* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
  {% endtab %}

{% tab title="Border" %}
Customizes the border surrounding the component.

* **Color / Size / Style / Radius:** Set the border color, thickness, style, and corner rounding.
  {% endtab %}

{% tab title="Size" %}
Controls the component's dimensions.

* **Width:** Set the component width.
  {% endtab %}

{% tab title="Component" %}
Styles the notification body (colors adapt to the chosen **Variant**).

* **Background Color / Color:** Set the notification background and text color.
* **Icon Background Color / Icon Foreground Color / Icon Radius:** Style the notification icon.
  {% endtab %}
  {% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.avonnicomponents.com/dynamic-components/components/scope-notification.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.