ComponentsToastToast Toasts can appear at any time to provide instant feedback on actions. They are usually temporary, but can also require the user to dismiss. Examples Variants PreviewCodeSwitch themeMutedBaseCopy codeInformationalCriticalSuccessWarningLoadingimport { Button, Flex, ToastStack, toast } from '@vtex/shoreline' export default function Example() { return ( <Flex> <Button onClick={() => toast.informational('Informational')}> Informational </Button> <Button onClick={() => toast.critical('Critical')}>Critical</Button> <Button onClick={() => toast.success('Success')}>Success</Button> <Button onClick={() => toast.warning('Warning')}>Warning</Button> <Button onClick={() => toast.loading('Loading')}>Loading</Button> <ToastStack /> </Flex> ) } Watch promises PreviewCodeSwitch themeMutedBaseCopy codeShow toastimport { Button, ToastStack, toast } from '@vtex/shoreline' export default function Example() { function promiseToResolve() { return new Promise((resolve) => { setTimeout(resolve, 2000) }) } return ( <> <Button onClick={() => toast.promise(promiseToResolve(), { success: 'Resolved', error: 'Promisse has error', loading: 'Loading', }) } > Show toast </Button> <ToastStack /> </> ) } Best PracticesBest Practices