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

Critical Action

Use with caution: candidate Web
The Critical Action component is used to highlight important and/or time-sensitive actions a user needs to take online.
Contributors
Lynn Stahl (Agile Six)
Adam Whitlock (Ad Hoc)
Belle Poopongpanit (Agile Six)
Christine Rose Steiffer (Agile Six)
Kristen Faiferlick (Ad Hoc)

Examples

View va-critical-action default in Storybook

View va-critical-action within a card component in Storybook

Usage

When to use Critical Action

  • When you want to highlight a single task that will otherwise block the user from proceeding. Use the Critical Action component for important and time-sensitive tasks that prevent the user from accessing their VA benefits or VA services. For example, they might need to request a refill to continue using a specific prescription, check into an appointment, or pay an overdue debt to prevent VA from offsetting VA benefit payments.

When not to use Critical Action

  • When an action is not urgent, time-sensitive, or required. Use the Alert component instead.
  • When you need to alert the user about a system error. Use Alerts to express system errors.
  • When you’re designing a form. Use the Alert component to display important messages in forms.

Anatomy or layout details

An annotated display of the Critical Action component, showing a yellow background and black text. The text and chevron link to a page where the user can take action.
Critical Action components are always yellow and link to a page where the user can take the action. The link spans all the way from the text to the right-aligned chevron.

General guidance

  • The Critical Action component links to a detail page from which the user can complete the call to action.
  • The Critical Action component is not dismissible. It should be removed when the user completes the call to action.

Placement details

In most cases, display the Critical Action component in a Card or Service List Item component. Place the component directly below the Status Tag component and take up the width of the component it is nested within. Include only one Critical Action component in a Card or Service List Item. Do not include multiple Critical Action components in a single Card or Service List Item.

A list of benefits a Veteran is enrolled in. Several of the benefits in the list have Critical Action components, which highlight an action the user needs to take.
In lists of Cards or Service List Items, Critical Action can highlight important or time-sensitive actions the user needs to take. This page is not currently in production.

On the My VA page, Critical Action components can be placed within a card to call out a specific action the user has to take. Within the card, it should fill 100% of its parent component’s width. Currently, this component should not be stacked in any other context and should not appear outside of a card.

My VA, with two yellow Critical Action components within cards.
On dashboard pages like My VA, Critical Action components should appear within the cards, to highlight the most pressing actions users need to take.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description link link string

The link to a page where the user can take action

 text text string

Text describing what critical action the user needs to take

Content considerations

  • Use the sentence structure “[Verb] by [date by which user must take the action]”. For example, “Verify your life insurance dependents by June 4, 2025” or “Pay your $30 copay by May 1, 2025”.
  • Keep the text concise. Work with the Platform Content team to develop clear, short messages that tell the user the required action and deadline (if applicable).
  • Content should be a single sentence without a period. If the Platform Content team advises using two sentences, each sentence should end with a period.
  • You may display the Critical Action component inside a Card or Service List Item on My VA or other page that shows multiple VA benefits. In these cases, the component should be shown in context with the benefit the action relates to. It’s important that the content clearly communicates the action to the user. The examples below show appropriate levels of detail.
Two examples of how much detail to add. For example, don’t say simply “Pay” or “Check in.” Rather, say “Pay your debt of $251.42” or “Check in to your Optometry appointment now.”

Accessibility considerations

  • Critical Action always contains a link. Follow best practices for the Link and Link - Action components.

Component checklist

Web Platform

58%

7 of 12 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

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

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 Critical Action component. Your input helps us make the design system better for everyone.

Edit this page in GitHub (Permissions required)
Last updated: Feb 03, 2026