Skip to main contenteBay Playbook

Alert notice overview

v4.0

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

  • Skin
  • Marko
  • 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.
  1. Page
  2. Section
  3. 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.

An information page notice placed at the top of a mobile screen. A primary cta button and item price are beneath it.

Section notice

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

An information section notice placed between a text block and a primary cta button.

Inline notice

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

An information inline notice placed between a group of text and a form field.

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.