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

heading

paragraph

variant

isCloseable

() => {
  return (
    <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

Name	Type	Default	Required	A11y	Description
children	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined				The contents of the Alert component
heading	string				Sets the heading for the alert
headingAccessibilityRole	AccessibilityRole | undefined	'header'			Accessibility role for the heading
icon	string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | null | undefined				Change the default icon
inline	boolean | undefined	false			Change the alert type to inline
isCloseable	boolean | undefined				Determines if alert has close button
isVisible	boolean | undefined	true			Flag to show or hide Alert
onClose	GestureResponderEventHandler				Callback fired when the alert is closed
paragraph	string				Sets the paragraph for the alert
variant	AlertVariant | undefined	'success'			Change the alert style

Alert.Link Props

Name	Type	Default	Description
after	Element | LinkInsertFunction | undefined		Insert element into link component after children
alt	boolean | undefined	false	Set the color of the Link to the alt variant
before	Element | LinkInsertFunction | undefined		Insert element into link component before children
children	((string | number | boolean | Value | AnimatedInterpolation<string | number> | ((state: PressableStateCallbackType) => ReactNode) | WithAnimatedObject<...> | WithAnimatedObject<...> | WithAnimatedObject<...> | null) & string) | undefined		Either children or a render prop that receives a boolean reflecting whether the component is currently pressed. Set the text of the link
color	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	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a single tap gesture is detected. Callback fired when the link is pressed
onPressIn	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a touch is engaged before onPress. Callback fired when the link is pressed In
onPressOut	(((event: GestureResponderEvent) => void) & ((event: GestureResponderEvent) => void)) | null | undefined		Called when a touch is released before onPress. Callback fired when the link is pressed Out
underline	boolean | undefined		Used to underline the link text

Alert.Button Props

Name	Type	Default	Description
children	ReactNode | ((state: PressableStateCallbackType) => ReactNode)		The contents of the button component
icon	ButtonIcon		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	GestureResponderEventHandler		Callback fired when the Button is pressed
submit	boolean | undefined	false	Flag to indicate the button is a form submit button
type	"text" | "filled" | "outline" | undefined	'filled'	Defines the button type (style)

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

Extends Abyss - Link Classes

Class Name	Description
abyss-alert-link-root	Alert link element
abyss-link-icon	Link icon
abyss-link-label	Link label
abyss-link-root	Link root element

Alert.Button Classes

Extends Abyss - Button Classes

Class Name	Description
abyss-alert-button-root	Alert button element
abyss-button-icon	Button icon element
abyss-button-label	Button label element
abyss-button-loading-spinner	Button loading spinner element
abyss-button-root	Button root element

Alert Tokens

Search 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