Crisis Line button

The Crisis Line button provides users quick access to crisis care.

Usage

When to use Crisis Line button

• Crisis Line button button currently displays on the following screens:
  • Login
  • Home
  • Contact VA
  • Category screens, including Benefits, Health, and Payments
• We don't include it on all screens to prevent banner fatigue / semantic satiation.
• It should be considered on screens where there is a likelihood the Veteran is there because they're in crisis.
• If the button is the only number on the page, it's possible it will be used as a general call center line.

Behavior

• When the component is tapped, it opens a full panel with more information.

Placement

• Component should appear near the top of the screen, directly below the top navigation bar.

Code usage

Crisis Line Button component

Properties

This component does not have props defined

Example

How to use the CrisisLineButton component

 <CrisisLineButton />

Source Code

Full code for the CrisisLineButton component

import React, { FC } from 'react'
import { useTranslation } from 'react-i18next'
import { Pressable, PressableProps } from 'react-native'

import { Box, TextView } from 'components/index'
import { NAMESPACE } from 'constants/namespaces'
import { useRouteNavigation, useTheme } from 'utils/hooks'

/**
 * Crisis Line Button component
 */
const CrisisLineButton: FC = () => {
  const theme = useTheme()
  const { t } = useTranslation(NAMESPACE.COMMON)
  const navigateTo = useRouteNavigation()

  const pressableProps: PressableProps = {
    accessible: true,
    accessibilityRole: 'link',
    onPress: () => navigateTo('VeteransCrisisLine'),
    style: ({ pressed }) => [
      {
        backgroundColor: pressed
          ? theme.colors.buttonBackground.crisisLineActive
          : theme.colors.buttonBackground.crisisLine,
        alignItems: 'center',
        justifyContent: 'center',
        minHeight: theme.dimensions.touchableMinHeight,
        borderRadius: 40,
      },
    ],
  }

  return (
    <Box mx={theme.dimensions.gutter} my={theme.dimensions.standardMarginBetween}>
      <Pressable {...pressableProps}>
        <TextView variant={'CrisisLineButton'} py={14}>
          {t('crisisLineButton.label')}
        </TextView>
      </Pressable>
    </Box>
  )
}

export default CrisisLineButton

Accessibility