Scope 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.
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.
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
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.
Set Component Visibility
All components support conditional visibility — see Component Visibility.
Styling
Configure the Scoped Notification's appearance from the Style tab of the Edit Scoped Notification panel.
Controls the outer spacing around the component.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Customizes the border surrounding the component.
Color / Size / Style / Radius: Set the border color, thickness, style, and corner rounding.
Controls the component's dimensions.
Width: Set the component width.
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.
Last updated
Was this helpful?