Links

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
Last modified 4mo ago