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. This component is commonly used to alert users to important information or updates. It 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. If needed, this message is set 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

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

Name	Description
Icon Border Radius	Define a icon border radius

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

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

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

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

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

Screen Components - Previous

Rating

Next - Screen Components

Separator

Last modified 3mo ago