Automatic renewal of account coverage could not be completed with the payment information on file. Please update payment info as soon as possible to avoid loss of coverage.
Notification
Notifications make users aware of relevant issues that should be either noted, avoided or addressed.
Also known as: alert, banner, callout, feedback message, inline alert, message bar, page banner, snackbar, status message, system message
Automatic renewal of account coverage could not be completed with the payment information on file. Please update payment info as soon as possible to avoid loss of coverage.
<bolt-notification>
<b>Unable to process renewal</b>
<br />
Automatic renewal of account coverage could not be completed with the payment information on file. Please <a href="">update payment info</a> as soon as possible to avoid loss of coverage.
</bolt-notification>Two-factor authentication (2FA) is recommended in order to improve basic security of your account. Update account security settings
<bolt-notification type="warning">
<b>Your account may be vulnerable to cyber attacks</b>
<br />
Two-factor authentication (2FA) is recommended in order to improve basic security of your account. <a href="">Update account security settings</a>
</bolt-notification><bolt-notification type="info">
Pending changes in your coverage will save you <b>$123.45/mo</b>!
</bolt-notification><bolt-notification type="success">
Your claim has beeen submitted for review!
</bolt-notification><bolt-notification>
Permalink to "<bolt-notification>"Syntax:
<bolt-notification>
Notification content goes here...
</bolt-notification>HTML may be used within the notification content, including links.
properties
Permalink to "properties"type(optional)- The type of notification scheme to be displayed.
- Values:
error(default)infosuccesswarning
General guidelines
Permalink to "General guidelines"- Notifications should be used for displaying time-sensitive status information about a task or workflow at the top of a page, below the Header.
- Use Notifications thoughtfully and sparingly, particularly Warning and Error Notifications. The infrequency of Notifications helps users take them seriously.
- Key actionable information should be visible at a glance in a Notification.
- Do not communicate multiple messages with a single Notification, if multiple messages of the same or different Notification type need to be communicated, use separate Notifications.
- Consider color and semantic meaning in Notification. Only use the assigned color for each Notification type. The Icon provided for each Notification type should not be altered.
Communicating importance
Permalink to "Communicating importance"Error
Permalink to "Error"- Use with content that communicates there is an immediate (critical) problem that needs to be corrected or solved.
Warning
Permalink to "Warning"- Use with content that communicates there is an issue that may become a problem in the future.
Info
Permalink to "Info"- Use with content that communicates useful and relevant (but not critical) information that helps users understand how current conditions affect what they can and cannot do.
Success
Permalink to "Success"- Use with content that confirms an action or task has been successfully completed.
When to use
Permalink to "When to use"- Use Notification when advising the user about page-level events in their current context, reaffirming a prior action's success, educating about new features, or in combination with form validation.
When not to use
Permalink to "When not to use"- Do not use if messaging is inline.
- Do not use if the issue communicated by the Notification is distracting, irrelevant or otherwise doesn't help users complete a task.
- Do not use Notifications casually. Minimize the number of Notifications displayed, making sure each one offers critical and useful information.
When to use something else
Permalink to "When to use something else"- If message is parenthetic or ancillary to the surrounding content, consider using a Note.
- When informing users about critical information requiring user action or decision, use Modal.
Do
- Use for page-level events.
- Use brief and direct communication.
- Use thoughtfully and sparingly.
- Minimize the number of Notifications displayed.
- Use separate Notifications for separate messages.
Don't
- Don't have multiple informational or critical messages simultaneously.
- Don't use Notification for marketing messages.
- Don't use Notification for inline messaging.
- Don't unnecessarily alarm users with multiple non-urgent Notifications.
- Don't use wordy, jargon-laden, or redundant copy.
Content guidelines
Permalink to "Content guidelines"- Copy for a Notification should use sentence case.
- Notification body copy should provide enough context for users to understand why the Notification appeared and what can be done to address it.
- Do not communicate multiple messages with a single Notification - if multiple messages of the same/different Notification type need to be communicated, use separate Notifications.
Accessibility compliance
Permalink to "Accessibility compliance"-
WCAG 2.2 Compliant
-
JAWS 2025 Tested
-
NVDA 2025 Tested
-
VoiceOver Tested
-
Keyboard Tested
-
aXe Tested
When using a notification on background colors, ensure there is proper color contrast.
- Notification background to container background must meet a 3:1 contrast.
- OR, the notification border to container background must meet a 3:1 contrast.
- If neither are met, then another background color should be chosen.
All Bolt components have gone through accessibility testing, but please keep our accessibility guidelines in mind.