> 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/flow/flow-components/scoped-notification.md).

# Scoped Notification

## Overview

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

The Scoped Notification displays a styled message block within a Flow screen to communicate status, warnings, errors, or instructions. It is a purely informational component — it has no interactions and no output variables.

***

## Configuration

To configure it, click the component on the Flow screen. The Edit Scoped Notification Component panel opens on the right with two tabs: Properties and Style. The sections below mirror the Properties tab.

### Properties

| Setting       | What It Does                                                                                                                         |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| **Variant**   | Sets the color theme: **Base** (gray, default), **Dark** (dark gray), **Error** (red), **Success** (green), or **Warning** (yellow). |
| **Title**     | The heading text displayed in bold at the top of the notification.                                                                   |
| **Content**   | The body text of the notification. Supports rich text formatting.                                                                    |
| **Icon Name** | An optional Lightning Design System icon displayed to the left of the notification content.                                          |
| **Icon Size** | Size of the icon: XX-Small, X-Small, Small, Medium, or **Large** (default).                                                          |

***

## Styling

{% 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
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:

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