- Confirmation messages have a background color of #eaf1e7 and a stroke color of #347814. Stroke styling is a solid 1px stroke with a 3px border radius.
- Confirmation text is Open Sans Semi Bold in #347814. Text should be left justified. There is 15px of padding around the text within the box.
- For Desktop, the font size is 15px.
- For Mobile, the font size is 14px.
- The close ‘x’ (recommended, but optional) must be top aligned with the text in the alert box. There should be a 44px touch area around the close ‘x’ affordance.
Set focus behavior:
- The Notification Container is inserted, and the page expands to accommodate. If text length necessitates wrapping, the page expands to accommodate.
- Placement: near CTA or top of form
- Set focus behavior TBD
Note: Design specs are for reference only. Developers should implement patterns using the Enterprise Framework whenever possible - see the Example section on this page.
When Do I Use This?
Use when a completion or submission results in a refresh of a page or module as a supplemental or primary confirmation of completion of a user-initiated action
It may not be necessary to use when the completion or submission results in a page turn.
Example use cases include: confirming success of edits (e.g. profile edits), settings have been saved, item added to cart, coupon loaded to my account.See also: Confirmations vs similar patterns
1. Primary Confirmation
When the completion happens off-screen
2. Supplemental confirmation
When the addition of a supplemental notification would help ensure noticeability of a subtle change.
3. Confirmation Pages
When an interaction results in a confirmation page, there is no need for an additional message. A checkmark (optional) may be used in this case.
4. Close X is recommended, but optional
Use as needed. If the user will do a page turn right after, there is no need for a close X.
Many users of assistive technology including users of screen readers and screen magnifiers may not be aware of content updates on the screen. When users are unaware of the changes, users may miss the updated content or the features that it contains. Source: Web Accessibility Best Practice 969
The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user about it. The alert role is most useful for information that requires the user's immediate attention, for example:
- An invalid value was entered into a form field
- The user's login session is about to expire
- The connection to the server was lost, local changes will not be saved
Alert messages should clearly describe the notifications that are present and, optimally, include cues or instructions for resolving or dismissing them.