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.
- 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
Dos and Don’ts
- 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 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
Variants - State
Variants - Screen Size
- Smaller title
- Full-width button
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.
|State||Intent||Example Title||Example Body|
|Informational||Inform user of upcoming maintenance||Scheduled Maintenance|
|Informational||Asks user if they still want to be logged in||Still There?|
|Error||Alerts user that an unspecified system error happened||Something Has Gone Wrong|
Refer to this code sample for the notice markup.
Use the default notice component specs plus the animation specs below.
|Background fade in & fade out duration||0.1 seconds|
|Notice grow animation duration||0.1 seconds|
|Notice grow initial size||0.9|
|Notice grow final size||1.0|