Alert notice overview

v4.0.0

Alert notices communicate system status and provide feedback to users about their actions and options.

Skin
CoreUI
React

Types

Three confirmation alert notices with green accents. Number 1 points to page notice. Number 2 points to section notice. Number 3 points to inline notice.

Page
Section
Inline

Choosing an alert notice

Page notice

Page notices communicate high-priority information at a page level. They are bold and prominent to capture attention. Learn more about using Page notices.

Section notice

Section notices are lower-priority messages that communicate status of a section of content. Learn more about using Section notices.

Inline notice

Inline notices are low-priority messages about a single element, like a tile or row item. Learn more about using Inline notices.

Semantic

Semantic messaging

"Semantic" refers to the meaning and purpose behind the design elements. For alert notices, this means each type of alert conveys a specific message through its style and context. The available options are neutral, guidance, success, and attention. Select the appropriate semantic type based on the nature of the message you want to communicate.

Four page notices stacked with the 4 semantic variants including information, attention, confirmation, and general.

Change log

Version	Date	Notes
4.0.0	Jun, 2024	Updated to eBay Evo
4.0.0	Oct, 2022	The page, section, and inline notices have been recombined into a single component to align with coded components. Content overrides should not reset, but this may lead to inline notice components showing a close icon and action when changes are accepted. Select the instances and toggle the “Actionable?” and “Dismissible?” properties to hide those elements. Added a “Level” property to choose between a page, section, or inline notice. Consolidated values for the “Action location” property as “below” and “beside.” Renamed “Show action” and “Show close icon” properties as “Actionable?” and “Dismissible?” respectively. Updated default values for body and title text properties. Toggled the new “simplify all instances” to hide layers without properties and simplify the property panel.
3.0.1	Jul, 2022	Fixed width of close icon container Updated alignment from center to top when the action is on the right.
3.0.0	Jun, 2022	Updated icon from medium to small Converted to using component properties New properties Semantic type Action location Show title Show action Show close icon Title content Body content Action label Updated layer name Cleaned up hidden layers Streamlined layer structure
2.2.0	May, 2022	Converted Level property values into unique components [Level=Page] is now “Alert page notice” [Level=Section] is now “Section page notice” [Level=Inline] is now “Inline page notice”