Scoped Notification

Serve advisory information for the user that is not important to justify an alert.

Overview

The Scoped Notification component is a user interface element that displays a notification message to users. It is commonly used to alert users to important information or updates. The component consists of a notification message and an optional action button.

Changing the Properties

Adding Title and Content

The Scoped Notification displays a message for the end-user. This message is set if needed 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.

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 the Scoped Notification

From the Styles panel, you can customize styling attributes for the Rating:

• Size: to add a max width for the Scoped Notification.

• Base: to customize styling settings for the Base variant.

• Error: to customize styling settings for the Error variant.

• Dark: to customize styling settings for the Dark variant.

• Success: to customize styling settings for the Success variant.

• Warning: to customize styling settings for the warning variant.

• Icon Border Radius: to customize the icon border radius if any icon is used.

You can find the instructions for styling here.

Examples

Specifications

Attributes

Name	Type	Description
iconName	String	The name of the icon to be used in the format 'utility:down'.
iconSize	String	The size of the icon. Valid options include xx-small, x-small, small, medium, or large.
title	String	Title of the notification.
content	String	Main content for the notification
variant	String	The variant changes the look of the scoped notification. Valid values include base, dark, warning, error, success.

Events

No events are available.

Styling Hooks

Name	Description
Icon Border Radius	Define a icon border radius

Base

Name	Description
Text Color	Define a Base Text color
Background Color	Define a Base background color
Icon Background Color	Define a Base icon background color
Icon Foreground Color	Define a Base icon foreground color
Icon Utility Foreground Color	Define a Base icon utility foreground color

Error

Name	Description
Text Color	Define a Text color for the error variant
Background Color	Define a background color for the error variant
Icon Background Color	Define a icon background color for the error variant
Icon Foreground Color	Define a icon foreground color for the error variant
Icon Utility Foreground Color	Define a icon utility foreground color for the error variant

Dark

Name	Description
Text Color	Define a Text color for the dark variant
Background Color	Define a background color for the dark variant
Icon Background Color	Define an icon background color for the dark variant
Icon Foreground Color	Define an icon foreground color for the dark variant
Icon Utility Foreground Color	Define an icon utility foreground color for the dark variant

Success

Name	Description
Text Color	Define a Text color for the success variant
Background Color	Define a background color for the success variant
Icon Background Color	Define an icon background color for the success variant
Icon Foreground Color	Define an icon foreground color for the success variant
Icon Utility Foreground Color	Define an icon utility foreground color for the success variant

Warning

Name	Description
Text Color	Define a Text color for the warning variant
Background Color	Define a background color for the warning variant
Icon Background Color	Define an icon background color for the warning variant
Icon Foreground Color	Define an icon foreground color for the warning variant
Icon Utility Foreground Color	Define an icon utility foreground color for the warning variant