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 Web
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

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

Web Platform

72%

8 of 11 complete

Maturity

Guidance

Web

Examples, usage, code usage, content considerations, and accessibility considerations are all complete.

Research

Web

VFS team conducted research on this component which is linked from this page.

Stability

Web

Component has been in production for more than 3 months with no significant issues found.

Adoption

Web

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

Web

Storybook includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component depicted in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Internationalization

Web

Describes i18n attributes.

Visual assets

Variations

Web

Figma library includes all variations (style, size, orientation, optional iconography, selection, error state, etc.)

Responsive

Web

Component designed to work in all responsive breakpoints.

Interactive states

Web

Includes all interactive states that are applicable (hover, active, focus, keyboard focus, disabled).

Tokens

N/A Web

All design attributes (color, typography, layout, etc.) are available as tokens.

Legend:

  • Complete
  • Incomplete
  • N/A Not applicable

Provide feedback

Share your feedback, report issues, or suggest improvements for the Notification component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Oct 06, 2025