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
: grayError
: redDark
: dark graySuccess
: greenWarning
: 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 |
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 |
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 |
Last updated