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.


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 are interactive and non-interactive UI elements that can be grouped together or presented individually. They are independent, reusable chunks of a user interface.

Upgrade to U.S. Web Design System v3

Components the VA shares with the USWDS have been synced to the design, styling, and functionality of the US System while retaining elements necessary to the VA. Components that have been converted are marked with a badge USWDS v3 at the top of their component page.

There are 3 exceptions where additional work is ongoing:

  1. va-table (additional variations to be added)
  2. va-file-input (fully redesigned)
  3. va-text-input (adding prefix, suffix and merging with number input)

All teams must now be using the v3 versions of our web-components. The Design System Team continues to roll out the new v3-based System including syncing color, typography, and spacing with the U.S. System.

How to use the new v3-based components


Add the VADS Component Library in Figma to be able to use the new v3-based versions of our components.

Migration strategy

Instructions are available for developers to be able to migrate components onto their v3-based version.

v1 components have now been deprecated

If your team is still using a v1 component, instances will be flagged in the Collab Cycle and may be considered launch blocking.

Governance rules for using v3-based components

v3-based versions of the components are designed to sit alongside our current v1 based components and the foundational elements of the Design System. Teams must use the new versions of our web-components and following these rules:

  • Do not mix and match different versions (v1 vs. v3) of the same component on the same page. For example, if you were to use the v3-based version of the accordion component on a page, that version must be used throughout that page (and ideally throughout your application as soon as possible).
  • Do not mix and match v1 and v3 based form components in the same application flow. For example, if you were to use the v3-based version of the radio button component on the first step in an application, that version must be used on all subsequent steps throughout the flow.

What is the difference between components, templates, and patterns?


Components are design elements that define a visual style and/or micro-interaction. A component is the smallest unit of measure within a design system. They can be considered concrete, a finite list: Button, accordion, table, etc.

Templates or Page layouts

Templates, or page layouts, compose components within a single page. A layout can contain multiple variations of a component depending on the context.


Patterns incorporate one or more page layouts and components to create an interaction that can span multiple pages, a short or long time span, and potentially even multiple channels. Patterns might be unique to a site or an application and may evolve with changes in technology or after competitive analysis.

A pattern is more than the sum of its parts. Patterns are solutions. In the Design System, patterns demonstrate how design, content strategy, reusable components, and accessibility can be put together to solve common problems that all Veterans may experience on

Create or update a component

If you have a new component, or an update to an existing component, consider contributing back to the design system. Reach out to the Design System Team if you have questions.

Create or update a component

Edit this page in GitHub (Permissions required)
Last updated: May 14, 2024