import { Toast, useNotify } from '@zeal-ui/core';
Editable Code
function ToastDemo() {const { isOpen, onOpen, onClose } = useNotify();return (<Container type="col" width="100%"><Button onClick={() => onOpen('TOAST')}>Toast</Button><ToastisOpen={isOpen === 'TOAST'}onClose={onClose}delay={3000}bottom="2rem"left="2rem"color="secondary"><Text>Lorem ipsum dolor sit amet.</Text></Toast></Container>);}
width
Description
It is used to set the width of the toast.
Values
String with valid width.
height
Description
It is used to set the height of the toast.
Values
String with valid height.
isOpen
Description
It is used to decide when the toast will be opened or closed.
Values
Boolean value.
onClose
Description
It is the function that closes the toast after the delay.
Values
Function that closes the toast.
delay
Description
It is the duration after which the toast gets closed.
Values
Number representing time in ms.
top | right | bottom | left
Description
It is used to set the position of the toast based on the view port.
Values
Valid position.
color
Description
It is used to set the color of the toast.
Values
primary | secondary | accent | error | warning | success
To learn about customizing the components check this section of the docs.