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.

Latest release: Component Library v56.16.1 (Oct 5, 2026)

About

What's new?

The latest news and updates on the VA Design System.
October 6, 2026

What’s Changed

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/2026-09-17…2026-10-06
September 17, 2026

What’s Changed

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/2026-08-31-2…2026-09-17
September 3, 2026

What’s Changed

Full Changelog: https://va.ghe.com/software/vets-design-system-documentation/compare/2026-08-31…2026-08-31-2

 v56.16.1
October 5, 2026

What’s Changed

Fixes

CSS Library

  • CSS-Library: update line-height-2 so that it matches USWDS by @JAMI-GIBBS in #2332

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.16.0…v56.16.1

 v56.16.0
September 29, 2026

What’s Changed

New Features & Components 🎉

Fixes

  • va-details: update styles to stablize icon alignment by @DANIEL-BRADY in #2314
  • va-crisis-line-modal: update styles for consistency and improve alignment by @DANIEL-BRADY in #2326
  • va-action-list-item: Add custom click event for action anchors by @Ryan-Munsch in #2327
  • va-action-list: Replace h-level element font-size rule with headings mixin by @Ryan-Munsch in #2325
  • va-action-list: Add expandable functionality for summary variant by @Ryan-Munsch in #2330
  • va-maintenance-banner: improve icon alignment and container structure by @DANIEL-BRADY in #2317
  • va-tag-status: Fix icon sizing issue with large font sizes by @Kerry-Powell in #2340
  • va-button-segmented: style updates for buttons by @Kerry-Powell in #2339

CSS Library

[!WARNING] This release includes an alpha version of va-header-navigation. This component should only be used for integration testing and should not be implemented at this time.

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.15.0…v56.16.0

 v56.15.0
September 21, 2026

What’s Changed

New Features & Components 🎉

Fixes

CSS Library

Full Changelog: https://va.ghe.com/software/component-library/compare/v56.14.0…v56.15.0

August 2026

Content style guide

  • Revised consideration about putting links on their own line to add “generally”:

    We generally put links on their own line to help make the page easier to scan and the intention of the link as clear as possible. Too many embedded links can be distracting or overwhelming to people with traumatic brain injuries or other cognitive impairments.

  • Added information on how to structure link text for links that go to a site outside of VA.gov:

    If the link takes the reader outside of VA.gov, name the external website in the link text. Put the action first (“Learn more about vaccines”) then the destination (“on the CDC website”) to lead with the value to the Veteran. We prefer to include the location in the main link text instead of in parentheses, like “Learn more about vaccines on the CDC website” and not “Learn more about vaccines (CDC website).”

    Use a link label that tells the reader where the link takes them. We prefer including the location in the main link text instead of in parentheses since it’s clearer for screen readers and translated text. For example, “Play the YouTube video on creating an account” and not “Play the video on creating an account (YouTube).” But it’s okay to use parentheses if needed because of space constraints or to make the link text clearer.

  • Replaced “abilities” with “ways of interacting with the information”:

    Avoid using words that assume certain ways of interacting with the information, like “See,” “Hear,” and “Watch.”

  • Updated guidance on links opening in a new tab to align with previous guidance. Links should only open in a new tab if the person will lose progress or unsaved data, regardless of the link’s destination:

    Note: Links should open in the same tab, unless they meet the specific criteria for opening in a new tab. If a link needs to open in a new tab, add “(opens in a new tab)” to notify the person. Don’t use the new window icon unless there are space constraints.

    Review guidance on when to open links in a new tab in the Components section

  • Added information on anchor and jump links:

    We sometimes use an anchor or jump link when we need to link to a section within a VA.gov page. Anchor or jump links can be helpful in certain cases, like when we want to direct someone to a specific section on a long page. But if the heading of the section we’re linking to ever changes, the anchor or jump link won’t work and will redirect to the top of the page. Use anchor and jump links with caution.

  • Added information on how to structure link text for online forms:

    Link text for forms

    • Links to the form Detail page follow this format: Get VA Form XX-XXXX to download.
    • Links to the online tool should include a verb and the purpose of the form. For example: Apply for healthcare benefits.
      Note: If it will make the purpose of the link clearer, include “online” in the link text (“Apply for healthcare benefits online”). But if including “online” will be too repetitive or if a form only has an online version (no PDF option), you don’t need to include “online.”
  • Updated all mentions of “form’s About page” to “form Detail page”
  • Made edits throughout to align with the style guide

Components

  • Updated guidance on links opening in a new tab to align with previous guidance:

    • Open all links in the same tab, with one exception. Only open links in a new tab if selecting the link would cause the person to lose progress or unsaved data. In all other cases, links should open in the same tab.
    • Always notify the person when opening in a new tab. Add “(opens in a new tab)” text to the link and use the external link variation. Don’t use the new tab icon unless there are space constraints.
      Note: The external link variation applies to links that open in a new tab, not links that take people to a site outside of VA.gov.
    • Links to a non-VA.gov site must indicate where they go. Follow the methods detailed in linking to external sites.
    • Links that open in a new tab must indicate that. By default, the link component’s external link variation will add “(opens in a new tab)” to the link text instead of using an icon. This follows Techniques for WCAG 2.0 advice on providing people with both a spoken and visual warning that this link opens in a new tab.

  • Made edits throughout to align with the style guide
Edit this page in GitHub (Permissions required)
Last updated: Sep 03, 2026