Skip to main content
U.S. flag

An official website of the United States government

Dot gov

The .gov means it’s official.
Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you’re on a federal government site.

Https

The site is secure.
The https:// ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.

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

Action 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:

  1. Header
  2. Status icon
  3. Body
  4. Link - Active
  5. 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.

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
Figma 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
Edit this page in GitHub (Permissions required)
Last updated: Jan 30, 2024