Skip to content

Notice

Description

Notice is a component for displaying messages related to events concerning the user's work in the interface.

It must fulfill four criteria to be considered a notice. Let's compare it to NoticeBubble and NoticeGlobal:

Comparison table of criteria for Notice, NoticeBubble and NoticeGlobal
CriteriaNoticeNoticeBubbleNoticeGlobal
Refers to the entire website✅ ❌
Global: Refers to pages, blocks, or large components rather than specific elements✅ ❌
Important: Missing the notice may result in missed opportunities or loss of data
Temporary: Appears and disappears under certain conditions, not a default block element

The notice message can be either:

  • contextual, appearing on product pages, widgets, and cards;
  • global, relating to the entire product.

Component composition

Component consists of the following:

  1. Notice.Content.
  2. Notice.Label (optional). It can be an icon, badge or illustration that accompanies the message.
  3. Notice.Actions (optional).
  4. Notice.Close (optional).

Notice content examples

Notice content examples
Appearance example
Notice with minimum possible elements
Notice with maximum possible elements

Sizes, paddings and margins

If your Notice has an icon and/or the Close button, add 2px top and bottom margins to the title, and 4px margins to the main text to align the elements visually.

The notice can be used as a standalone component or embedded within other components. For instance, it can be placed inside dropdowns and modal windows.

The internal paddings of the notice match those of the component it's nested within.

Maximum text width

Avoid stretching the text to the full width of the notice, particularly when the notice spans the entire screen width. Fully stretched text is inconvenient to read.

TIP

We recommend to set the maximum width of the notice message to 650-800px.

Themes

Notice themes
ThemeUsage and appearance example
MutedUsed for regular messages and hints.
InfoUsed for neutral and important information, and collecting feedback. For announcing new features or other products, consider using this notice with a large image (often referred to as advertising notices).
SuccessUsed for triggers related to purchasing or taking a trial, as well as displaying successful completion of forms, for example.
WarningSuitable for important but non-critical errors or warnings, such as service reports, unavailable functionality, or temporary failures.
DangerIntended for serious errors, problems, or actions that prevent users from continuing their work or result in data loss.

Placement in interface

On page

If the notice is applicable to the entire product, position it in the product header (below the breadcrumbs) and let it inherit the width of the content section. For more information about paddings and margins, refer to the ProductHead.

TIP

Avoid placing multiple notices on the page simultaneously.

If the message pertains solely to the content of a specific tab within the product, position the notice beneath the TabLine.

Inside widget

If the notice is associated with a widget, position it inside the widget. The exact placement will depend on the context. Generally, in such cases, the notice should inherit the width of the content section of the widget.

Inside component

If the notice only relates to the component, position it at the top or bottom of the component and let it inherit the width of the component.

Interaction

Opening

The notice should appear instantaneously without any delays or visual effects. It should be displayed immediately upon the loading of the page or component.

Lifespan

Since the notice serves as a temporary notification, it should have a predefined "lifespan." The lifespan can be determined by the following rules:

  • Number of days (for example, for the duration of an experiment)
  • Number of user sessions
  • Specific events (for example, completion of tasks, bug fixes, transitioning features out of beta)
  • User actions as triggers (for example, installing something, viewing specific content, resolving an error)

Hiding

  • Activating the Close button.
  • Activating a link that triggers a re-opening condition (for example, "Ask me later," "Never show again," etc.).
  • If there is no Close button or hide link, the user can't manually hide the notice. It will be hidden automatically based on conditions set by the service (such as a specific duration, a certain number of sessions, or triggering a specific action).

Animation

When hiding, the notice should smoothly fade out with a duration of 250ms. The page content should transition to fill the space vacated by the notice within 250ms.

Custom notice

Custom notices have their own rules and distinct styles compared to the default themes.

Feedback notice

The feedback notice deviates from the regular notice as it's attached to the header and spans the entire width of the content section of the report. It has no margins at the top, right, or left. You can refer to the FeedbackYesNo guide for an example.

Advertising

The advertising notice is designed to capture the user's attention more effectively than a notice with default theme. It should be used when announcing features, updated versions, relocations, limited-time promotional actions, and similar purposes. If your product doesn't require such emphasis, use a notice with the info theme.

The advertising notice differs from the default notice through the inclusion of advertising illustrations and the option to incorporate controls like input fields and select dropdowns to engage users quickly.

TIP

Avoid using an advertising notice for an "empty" state on a page or inside a component.

Usage in UX/UI

General rules

  • Notices can be used to notify users about various events, such as product and report announcements, collecting feedback, providing quick help for additional features, system status (errors, failures, completion of tasks, new features), and more.
  • In certain cases, notices with the same text may have different colors to convey different meanings.
  • Typically, notices are replaced by others based on priority: danger > warning > success > info.
  • Be concise and avoid overshadowing other widgets or report functionalities. Strive to convey the message to users within two lines for notices, and within four lines for notices within blocks or other components.

Incorrect use

A notice shouldn't be mistaken for other components:

  • NoticeBubble: NoticeBubble is a local component used to respond to user actions, while a notice is a global component that's generally not associated with user actions.
  • Tooltip: Tooltips are used to provide hints or descriptions of functionality and are permanently displayed upon hover. On the other hand, notices are temporary components that typically appear immediately after user actions.
  • Notes, hints: Notes and hints provide additional information about functionality and are permanent in nature. In contrast, notices are temporary and don’t explain the functionality itself. At most, they may provide guidance on resolving reported problems or performing required actions.

Examples of incorrect usage

Avoid using notice to show permanent informational message within a form.

An error related to a temporary failure. In this case, a notice with warning theme should be used.

A notice appearing on top of the interface to indicate the completion of a hidden process. It's advised to avoid this and use NoticeBubble instead in such cases.

Released under the MIT License.

Released under the MIT License.