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

variant

paragraph

href

linkText

heading

underlineLink

isClosable

<Toast href="https://www.google.com" linkText="Google" paragraph="Link to Google" />

Variant

Use the variant property to set the color of the Toast. The options are success, warning, error, and info. The default is success.

Icons

Use the icon prop to pass in a specific Icon component. The expected size for the icon is 18px to stay consistent with the height of the text within the Toast. Find further guidance on icons symbols in the Icons Symbols Tab.

Heading

Use the heading prop to add text above the description. This is optional and should only be used to summarize the paragraph if needed.

Paragraph

Change the paragraph of the Toast to set the text.

onPress

Use the onPress function to handle the action when the link within the Toast is pressed.

Link Text

Change the linkText prop to set the text.

Use the underlineLink prop to underline the linkText.

Dismissible Toast

Use the isClosable prop to create a dismissible toast. The toast will remain on the screen until a user presses the close button or the set duration time has expired. Accessibility requires a toast that has a link to be dismissible, this cannot be changed.

Toast Functions

Toast.show()

Toast.show(options: ShowToastOptions): string

The Toast will appear at the top of the screen for a default duration of 7 seconds per accessibility. It is recommended to increase the duration if more content is placed within the toast. A toast with a heading and description, or a link, should account for the time a user may need to interact with the toast. To use Toast.show(), import the ToastProvider.

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

• duration - Sets the time before the toast disappears.
• placement - Determines the placement of the toast.
• offset - Offset space for both the top and bottom of the toast.
• onPress - Callback fired when the link is pressed.
• onClose - Callback fired when the toast disappears.
• href - Sets the URL of the link.
• icon - Adds an icon to the Toast component.
• linkText - Sets the text of the link.
• heading - Sets the heading of the toast.
• paragraph - Sets the text of the Toast Message.
• variant - Sets the color of the toast.
• animationDuration - Sets the transition time of the toast.
• underlineLink - Sets the heading of the toast.
• isClosable - Adds close icon to close the toast. The toast will not disappear until the close icon is pressed.

In addition, Toast.show() also accepts the same props as the Toast component.

Toast.update()

Toast.update(id: string, options: ShowToastOptions): void

The function updates the already shown toast by passing in the unique id of the respective toast and the parameters to update.

Toast.hide()

Toast.hide(id: string): void

The function hides the toast by specifying a unique id that is returned by Toast.show().

Toast.hideAll()

Toast.hideAll(): void

The function hides all toasts rendered on the screen.

Toast Props

Prop Name	Type	Default	Description
heading	string	-	The text to be displayed above the main content
href	string	-	Set the URL of the link
icon	node	-	Adds an icon to the Toast component
isClosable	boolean	false	Creates a toast dismissible by close button only
linkText	string	-	Set the text of the link
onPress	function	-	Callback fired when the button is pressed
paragraph	string	-	The text to be displayed within the Toast component
underlineLink	boolean	false	Adds underline to link text
variant	"success" | "warning" | "error" | "info"	success	Set the color of the toast

Toast Classes

Extends Abyss - Link Classes

Class Name	Description
abyss-toast-close-button	Close button
abyss-toast-close-icon	Close icon
abyss-toast-content-container	Toast element
abyss-toast-content-wrapper	Toast outer element
abyss-toast-heading	Toast heading element
abyss-toast-icon	Toast icon element
abyss-toast-link	Toast link
abyss-toast-paragraph	Toast paragraph element
abyss-toast-paragraph-container	Toast paragraph container
abyss-toast-root	Toast root element

Toast Translations

Translation Key	Value
close	Close

ToastProvider Translations

Translation Key	Value
alert	Alert

Focus Guidance for Dismissable Toasts

Abyss does not control the focus of components on the screen when a dismissable Toast is closed. To meet accessibility guidelines, the focus must be set to the previous node when closed. The useSetFocus hook can be used for this.

For example, if a button is pressed that triggers a Toast, focus must return to that button once it is closed, so that a screen reader or keyboard user may continue using the app where they left off.

Search tokens

Toast Tokens

Token Name	Value
toast.color.surface.container.success	#007000
toast.color.surface.container.info	#196ECF
toast.color.surface.container.warning	#C24E14
toast.color.surface.container.error	#990000
toast.color.icon.leading	#FFFFFF
toast.color.icon.close	#FFFFFF
toast.color.text.heading	#FFFFFF
toast.color.text.paragraph	#FFFFFF
toast.color.text.link	#FFFFFF
toast.border-radius.all.container	8
toast.sizing.all.icon.close	20
toast.sizing.all.icon.leading	20
toast.spacing.padding.all.container	16
toast.spacing.gap.horizontal.container	8
toast.spacing.gap.vertical.content	4
toast.box-shadow.container	Shadow Color: rgba(0,0,0,0.16) Shadow Offset: Width: 0 Height: 8 Shadow Opacity: 1 Shadow Radius: 24