Components
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.
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
Designers
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 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.
- Examples of design system components can be found in Storybook or in this section (components are listed in the side navigation). If your team is using any component outside of the design system web components, that is considered an imposter component and will be listed as a violation at your Staging Review. This includes components that are coded to look and function like design system web components, but do not use the design system code. Any use of an imposter component will be considered a launch-blocking issue and must be fixed before your team can launch to the production website.
What is the difference between components, templates, and patterns?
Components
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
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 VA.gov.
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.