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

Crisis Line Modal

Use with caution: available Web
The Crisis Line Modal is found in the Header of VA.gov and provides contact information for the Veteran Crisis Line.

Examples

Default

View va-crisis-line-modal default in Storybook

Usage

  • Provided by default in the VA.gov header. The Crisis Line modal is a sub-component of the header component. The web-component version of this modal will be included in the injected VA.gov header web-component when that component is built.

Placement

  • This modal must always appear in the VA.gov header, including the minimal variation.

Content considerations

  • Do not alter the contents of this component. The contents of this component are governed by CAIA.

Code usage

Web

Attributes and Properties

Property Attribute Type Default Description chatUrl chat-url string 'https://www.veteranscrisisline.net/get-help-now/chat/'

URL for the chat service. Defaults to Veterans Crisis Line chat.

 mode mode "modal" | "trigger" undefined

Determines what to render:

  • 'trigger': Renders only the trigger button (no modal in DOM). Use the document event to open a separate modal instance.
  • 'modal': Renders only the modal (no trigger button). Dispatch the custom event vaCrisisLineModalOpen on document to open it.
  • null or undefined: Renders both trigger and modal (default behavior).
 phoneExtension phone-extension string '1'

Phone extension for the crisis line. Defaults to 1.

 phoneNumber phone-number string '988'

Phone number for the crisis line. Defaults to 988.

 textNumber text-number string '838255'

Text number for the crisis line. Defaults to 838255.

 ttyCrisisExtension tty-crisis-extension string CONTACTS_WITH_EXTENSION.CRISIS_MODAL_TTY.extension || '988'

TTY extension for the crisis line. Defaults to 988.

 ttyNumber tty-number string CONTACTS_WITH_EXTENSION.CRISIS_MODAL_TTY.phoneNumber || '711'

TTY number for the crisis line. Defaults to 711.

Component checklist

Web Platform

54%

6 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.
Note: This component is not yet in use in production.

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

Edit this page in GitHub (Permissions required)
Last updated: Sep 10, 2025