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

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.

Alert
Card

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

Notification

The Notification component is now deprecated.

Examples

Default

Action required

Update

With Close Icon button

Header level change

Not dismissible

No border

Multiple with border

Multiple with no border