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	Description
children	React.ReactNode | 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	React.ReactNode | 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	Abyss.GestureResponderEventHandler	-	-	Callback fired when the alert is closed
paragraph	string	-		Sets the paragraph for the alert
variant	'info' | 'success' | 'error' | 'warning' | undefined	'success'	-	Change the alert style

Alert.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

Alert.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
type	'filled' | 'outline' | 'text' | undefined	'filled'	-	Defines the button type (style)

Alert Classes

Class Name	Description
abyss-alert-root	Alert root element
abyss-alert-content	Alert content element
abyss-alert-heading	Alert heading element
abyss-alert-paragraph	Alert paragraph element
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-icon	Alert icon element

Alert.Link Classes

Extends Abyss - Link Classes

Class Name	Description
abyss-alert-link-root	Alert link element

Alert.Button Classes

Extends Abyss - Button Classes

Class Name	Description
abyss-alert-button-root	Alert button 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