Components
Notification
Don't use: Deprecated
Provides a visually distinct card in order to surface time-sensitive updates and action items.
The Notification component is now deprecated.
Teams are continuing to explore solutions to bring attention to items that have changed in a view. If you wish to use this component, please speak with the Design System Team.
Examples
Default
View va-notification in Storybook
View va-notification in StorybookAction required
View va-notification in Storybook
Update
View va-notification in Storybook
With Close Icon button
View va-notification in Storybook
Header level change
View va-notification in Storybook
Not dismissible
View va-notification in Storybook
No border
View va-notification in Storybook
Multiple with border
View va-notification in Storybook
Multiple with no border
View va-notification in Storybook
Usage
When to use Component name
- Time-sensitive information. Provides a visually distinct card in order to surface time-sensitive updates and action items.
- Highlight most important information. Visually stands out from other cards and content on the page so the user knows it is the most important thing to pay attention to.
When to consider something else
- Alerts in response to user action.: Use an Alert for messages that occur in response to a user action.
- Card collections: Use a standard Card for a collection of information.
How this component works
The component is comprised of the following elements:
- Header
- Status icon
- Body
- Link - Active
- Close icon and text
Choosing between variations
- Use Action required when the user needs to take action. The action required variation is explicitly for notifications that require the user to take an action. Use update or the default when no specific action is required.
- Drop the border when there are more than 3 notifications in a set. In order to avoid visual noise and distraction use the no border variation when there are more than 3-5 notifications in a list.
- Avoid making the notification non-dismissible. Don’t take autonomy away from the user unless there is a clear and valid use case.
Placement
Notifications should appear below the H1 of the page and near the top of the content of the page.
Instances of this component in production
Currently, the notification component will be used on MyVA and in MyHealtheVet.
Code usage
Attributes and Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
closeBtnAriaLabel |
close-btn-aria-label |
string |
'Close notification' |
Aria-label text for the close button. |
closeable |
closeable |
boolean |
false |
If `true`, a close button will be displayed. |
dateTime |
date-time |
string |
Date and time for notification. This will also be incorporated into a unique aria-describedby label. | |
disableAnalytics |
disable-analytics |
boolean |
false |
If `true`, the component-library-analytics event is disabled. |
hasBorder |
has-border |
boolean |
true |
If `false`, card will not have border |
hasCloseText |
has-close-text |
boolean |
false |
If `false`, card will not have the word "CLOSE" next to close icon |
headline |
headline |
string |
Headline for notification | |
headlineLevel |
headline-level |
string |
'3' |
Define level for headline. Font size will remain the same regardless of header level. |
href |
href |
string |
Destination URL for link (optional) | |
symbol |
symbol |
string |
'none' |
Symbol indicates type of notification Current options are: action-required, update |
text |
text |
string |
Text for destination link. Set to empty string if you don't want a link. | |
visible |
visible |
boolean |
true |
If `true`, the card will be visible. |
Events
| Name | Description |
|---|---|
closeEvent |
Fires when the component is closed by clicking on the close icon. This fires only when closeable is true. |
component-library-analytics |
The event used to track usage of the component. |
component-library-analytics |
Content considerations
- Use concise, active voice, plain language content and limit the notification body to just a few lines.
Accessibility considerations
- Use the header level change to set the appropriate header level within the flow of the page without altering the size and weight of the header.
Related
Component checklist
Maturity
- Guidance
- Examples, usage, code usage, content considerations, and accessibility considerations are all complete.
- Research
- VFS team conducted research on this component which is linked from this page.
- Stability
- Component has been in production for more than 3 months with no significant issues found.
- Adoption
- Multiple teams have adopted this component.
Accessibility
While this component has been previously tested against older criteria, it has not yet been audited with the updated testing criteria.
Code assets
- Variations
- Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component depicted in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
- Internationalization
- Describes i18n attributes.
Visual assets
- Variations
- Sketch library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)
- Responsive
- Component designed to work in all responsive breakpoints.
- Interactive states
- Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).
- Tokens
- All design attributes (color, typography, layout, etc.) are available as tokens.
72% complete (8 of 11)
Legend:
- Complete
- Incomplete
- Not applicable