Notices

Notices

Notice alerts users to system-related issues and updates.

Note: If you’re a partner building an app that appears within Salesforce, don’t use this component.

Usage

  • Visual: Pronounced
  • Voice & Tone: (Varies per circumstance)
  • Motion: Dramatic
  • Duration: Permanent
  • Audio: Loud

Notices appear when the system needs to communicate a message to the user; it doesn’t show up as a result of user action. Notices should appear rarely and generally should not be a part of a typical user flow.

Notices do not have a close (×) button. To dismiss a notice, the user needs to hit the action button inside of the notice.

A notice can show one of the following states:

  • Error: when the system is running into a system issue that may prevent the user from moving forward properly.
  • Informational: when the system needs to relay system-related information that isn’t necessarily work-stopping.

Notice in Context

Notice in Context (Mobile)
Notice in Context (Desktop)

Dos and Don’ts

Do

  • Do use notices sparingly. They should not be your first choice to display system messaging because they interrupt the user and block everything else on the page.
  • Do solicit user feedback in notices when it makes sense. When an unexpected system error happens, for example, user feedback may be a good way to identify the issue.

Do Not

  • Do not use notices as a confirmation for user action, e.g. warning before user deletes an item. Use a standard modal instead for this.
  • Do not stack multiple notices.

Variants - Component

One Action Button

Scheduled Maintenance

Sunday March 15, 08:00 AM PST – 10:00 AM PDT

Please be advised that salesforce.com will be performing scheduled maintenance during the above time period.

Salesforce.com may be intermittently unavailable or slow during this period.

Multiple Action Buttons

Still There?

For security, we log you out if you’re inactive for too long.

One Action Button + Input

Sorry to Interrupt

This page has an error. You might just need to refresh it. First, would you give us some details?

(We’re reporting this as error ID: 7491d3-88xd-5obnp034271twp).

Variants - State

Error

Something Has Gone Wrong

Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your adminstrator.

Informational

Scheduled Maintenance

Sunday March 15, 08:00 AM PST – 10:00 AM PDT

Please be advised that salesforce.com will be performing scheduled maintenance during the above time period.

Salesforce.com may be intermittently unavailable or slow during this period.

Variants - Screen Size

Mobile

Scheduled Maintenance

Sunday March 15, 08:00 AM PST – 10:00 AM PDT

Please be advised that salesforce.com will be performing scheduled maintenance during the above time period.

Salesforce.com may be intermittently unavailable or slow during this period.

  • Smaller title
  • Full-width button

UI Text

UI text can vary greatly case to case, depending on the context. The guidelines below serve as examples, but you are not limited to them.

StateIntentExample TitleExample Body
InformationalInform user of upcoming maintenanceScheduled Maintenance

Sunday March 15, 08:00 AM PST – 10:00 AM PDT.

Please be advised that salesforce.com will be performing scheduled maintenance during the above time period.

Salesforce.com may be intermittently unavailable or slow during this period.

InformationalAsks user if they still want to be logged inStill There?
For security, we log you out if you’re inactive for too long.
ErrorAlerts user that an unspecified system error happenedSomething Has Gone Wrong
Unfortunately, there was a problem. Please try again. If the problem continues, get in touch with your adminstrator.

Recommended Specs

Refer to this code sample for the notice markup.

Use the default notice component specs plus the animation specs below.

DescriptionTokenValue
Background fade in & fade out duration$duration-quickly0.1 seconds
Notice grow animation duration$duration-quickly0.1 seconds
Notice grow initial sizeN/A0.9
Notice grow final sizeN/A1.0