import { NeedHelp } from '@uhg-abyss/mobile';<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
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The contents of the NeedHelp component |
| heading | string | - | Sets the heading for the NeedHelp |
| paragraph | string || node | - | Sets the paragraph for the NeedHelp |
NeedHelp.Link Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| after | ReactNode | - | Insert element into link component after children |
| before | ReactNode | - | Insert element into link component before children |
| children | ReactNode | - | Set the text of the link |
| href | string | - | Set the URL of the link |
NeedHelp.Button Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The contents of the button component |
| icon | { name: string, variant?: string } | React.ReactNode | string | Function | - | Configuration for an icon to display in the button |
| iconPosition | 'leading' | 'trailing' | 'iconOnly' | false | When true, displays only the icon in a circular button |
| isDisabled | boolean | false | Flag to disable the button |
| isLoading | boolean | false | Flag to show loading spinner within the button |
| onPress | function | - | Callback fired when the button is pressed |
NeedHelp Classes
| Class Name | Description |
|---|---|
| abyss-need-help-children-container | NeedHelp children container |
| abyss-need-help-heading | NeedHelp heading element |
| abyss-need-help-root | NeedHelp root element |
| abyss-need-help-text | NeedHelp text element |
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
| 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 |