import { Alert } from '@uhg-abyss/mobile';<Alert heading="Completed Health Screen:" paragraph="Review of your results are ready." isCloseable={true}> <Alert.Button>Go To Results</Alert.Button></Alert>Heading and Paragraph
The heading and paragraph props are used to set the heading and paragraph of the alert.
Both props are required.
isCloseable
The isCloseable prop determines if a close button is displayed in the alert. It defaults to true unless the inline prop is enabled.
Variants
Use the variant property to set the color of the Alert.
The options are success, warning, error, and info. The default is success.
Inline Variant
The inline variant functions the same as the default, but is rounder and takes up less width. It uses the inline prop, changing the border radius to create a more rounded look. The inline variant should be wrapped in a component that provides padding on the left and right (see example below).
Children
Add Children to the Alert component by simply placing elements between the Alert tags. Children should be used for adding either a link or button.
Links and buttons can be added with the Alert.Link and Alert.Button components, respectively.
Change Icon
Use the icon property to pass in a specific Icon component.
Since heading and paragraph are required props, icons are used in a setting in which it is just a decorative element (which is the default case for icons) and should be ignored by screen readers. The implementation below provides an example. Since the default of isScreenReadable is set to false, no specific changes need to be made for decorative icons. Find further guidance on icons symbols in the Icons Symbols Tab.
onClose
Use the onClose property to handle the action when close button is triggered. The onClose property is always required.
Alert Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The contents of the Alert component |
| heading | string | - | Sets the heading for the alert |
| icon | ReactNode | - | Change the default icon |
| inline | boolean | false | Change the alert type to inline |
| isCloseable | boolean | true | Determines if alert has close button |
| isVisible | boolean | true | Flag to show or hide Alert |
| onClose | function | - | Callback fired when the alert is closed |
| paragraph | string | - | Sets the paragraph for the alert |
| variant | 'info' | 'success' | 'error' | 'warning' | success | Change the alert style |
Alert.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 |
| color | string | - | Set the color of the link |
| href | string | - | Set the URL of the link |
| onPress | function | - | Callback fired when the button is pressed |
| underline | boolean | false | Used to underline the link text |
Alert.Button Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| after | node | - | Insert element into button component after children |
| before | node | - | Insert element into button component before children |
| children | node | - | The contents of the button component |
| isDisabled | boolean | - | Flag to disable the button |
| onPress | function | - | Callback fired when the button is pressed |
| rounded | boolean | - | Flag to make button rounded |
Alert Classes
| Class Name | Description |
|---|---|
| abyss-alert-children-container | Alert children container |
| abyss-alert-close-button | Alert close icon container |
| abyss-alert-close-icon | Alert close icon element |
| abyss-alert-content | Alert content element |
| abyss-alert-heading | Alert heading element |
| abyss-alert-icon | Alert icon element |
| abyss-alert-paragraph | Alert paragraph element |
| abyss-alert-root | Alert root element |
Alert.Link Classes
| Class Name | Description |
|---|---|
| abyss-alert-link-root | Alert link element |
Alert.Button Classes
| Class Name | Description |
|---|---|
| abyss-alert-button-root | Alert link element |
Alert Tokens
| Token Name | Value | |
|---|---|---|
| alert.color.surface.container.success | #F0F9ED | |
| alert.color.surface.container.warning | #FFFBEB | |
| alert.color.surface.container.info | #EDF3FB | |
| alert.color.surface.container.error | #FCF0F0 | |
| alert.color.icon.success | #007000 | |
| alert.color.icon.warning | #C24E14 | |
| alert.color.icon.info | #196ECF | |
| alert.color.icon.error | #990000 | |
| alert.color.icon.close | #4B4D4F | |
| alert.color.text.heading | #323334 | |
| alert.color.text.paragraph | #4B4D4F | |
| alert.color.border.container.success | #BFDBBF | |
| alert.color.border.container.warning | #F3D8C0 | |
| alert.color.border.container.info | #C3D8F2 | |
| alert.color.border.container.error | #E8C0C0 | |
| alert.border-radius.all.container.inline | 8 | |
| alert.border-width.bottom.container.full-width | 1 | |
| alert.border-width.bottom.container.inline | 1 | |
| alert.border-width.all.container.inline | 1 | |
| alert.sizing.all.icon.close | 20 | |
| alert.sizing.all.icon.leading | 20 | |
| alert.spacing.padding.all.container | 16 | |
| alert.spacing.gap.vertical.text | 2 | |
| alert.spacing.gap.vertical.content | 8 | |
| alert.spacing.gap.horizontal.container | 8 |
Alert Props
| V2 | V1 | Status |
|---|---|---|
| children | children | Unchanged |
| heading | title | Renamed |
| icon | icon | Unchanged |
| inline | inline | Unchanged |
| isCloseable | isCloseable | Unchanged |
| isVisible | isVisible | Unchanged |
| onClose | onClose | Unchanged |
| paragraph | description | Renamed |
| variant | variant | Unchanged |
Alert Classes
| V2 | V1 | Status |
|---|---|---|
| alert-children-container | alert-children-container | Unchanged |
| alert-close-button | alert-close-button | Unchanged |
| alert-close-icon | alert-close-icon | Unchanged |
| alert-content | alert-content | Unchanged |
| alert-heading | alert-title | Renamed |
| alert-icon | alert-icon | Unchanged |
| alert-paragraph | alert-text | Renamed |
| alert-root | alert-root | Unchanged |