import { NeedHelp } from '@uhg-abyss/mobile';

heading

paragraph

(
  <NeedHelp
    heading="Completed Health Screen:"
    paragraph="Review of your results are ready."
  >
    <NeedHelp.Button>Go To Results</NeedHelp.Button>
  </NeedHelp>
);

Heading and Paragraph

The heading and paragraph props are used to set the heading and paragraph of NeedHelp. Both props are required. The paragraph can also take a node.

Children

Add Children to the NeedHelp component by simply placing elements between the NeedHelp tags. Children should be used for adding either a link or button. Links and buttons can be added with the NeedHelp.Link and NeedHelp.Button components, respectively.

NeedHelp Props

Name	Type	Default	Required	Description
children	React.ReactNode | undefined	-	-	The contents of the need help component
heading	string	-		Set the heading of the need help component
headingAccessibilityRole	AccessibilityRole | undefined	'header'	-	Accessibility role for the heading element
paragraph	React.ReactNode	-		Set the paragraph of the need help component

NeedHelp.Link Props

Name	Type	Default	Required	Description
after	React.JSX.Element | (props: { color?: Abyss.Color; isPressed?: boolean; }) => React.JSX.Element | undefined	-	-	Insert element into link component after children
alt	boolean | undefined	false	-	Set the color of the Link to the alt variant
before	React.JSX.Element | (props: { color?: Abyss.Color; isPressed?: boolean; }) => React.JSX.Element | undefined	-	-	Insert element into link component before children
children	string | undefined	-	-	Set the text of the link
color	Abyss.Color | undefined	-	-	Set the color of the link
href	string | undefined	-	-	Set the URL of the link
inline	false | undefined	false	-	Render as standard Pressable link with flexbox layout. Supports before/after icons. Use inline={true} for text-inline variant.
onPress	Abyss.GestureResponderEventHandler	-	-	Callback fired when the link is pressed
onPressIn	Abyss.GestureResponderEventHandler	-	-	Callback fired when the link is pressed In
onPressOut	Abyss.GestureResponderEventHandler	-	-	Callback fired when the link is pressed Out
underline	boolean | undefined	-	-	Used to underline the link text

NeedHelp.Button Props

Name	Type	Default	Required	Description
children	React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode) | undefined	-	-	The contents of the button component
icon	IconObj | IconSymbolName | IconInsertFunction | React.ReactNode | undefined	-	-	Defines the icon name, variant and position
iconPosition	'leading' | 'trailing' | 'iconOnly' | undefined	'trailing'	-	Defines the position of the icon relative to the button text
isDisabled	boolean | undefined	false	-	Disables the button
isLoading	boolean | undefined	false	-	Shows a loading spinner
onPress	Abyss.GestureResponderEventHandler	-	-	Callback fired when the Button is pressed
submit	boolean | undefined	false	-	Flag to indicate the button is a form submit button

NeedHelp Classes

Class Name	Description
abyss-need-help-root	NeedHelp root element
abyss-need-help-heading	NeedHelp heading element
abyss-need-help-text	NeedHelp text element
abyss-need-help-children-container	NeedHelp children container

NeedHelp.Link Classes

Extends Abyss - Link Classes

Class Name	Description
abyss-need-help-link-root	NeedHelp link element

NeedHelp.Button Classes

Extends Abyss - Button Classes

Class Name	Description
abyss-need-help-button-root	NeedHelp link element

NeedHelp Tokens

Search tokens

Token Name	Value
need-help.color.surface.container	#EEF8FB
need-help.color.border.container	#CBCCCD
need-help.color.text.heading	#002677
need-help.color.text.paragraph	#4B4D4F
need-help.border-width.top.container	1
need-help.spacing.padding.horizontal.container	16
need-help.spacing.padding.vertical.container	24
need-help.spacing.gap.vertical.container	16
need-help.spacing.gap.vertical.text	2

NeedHelp Props

V2	V1	Status
children	children	Unchanged
heading	title	Renamed
paragraph	description	Renamed