Usage
import {Toast} from '@loomhq/lens'
<Toast>Content</Toast>
Examples
Simple toast
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(true)} variant="primary">
Trigger Toast
</Button>
<Toast
isOpen={isOpen}
onCloseClick={() => setIsOpen(false)}
>
Message sent!
</Toast>
</>
)}
Toast with custom content
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(true)} variant="primary">
Trigger Toast
</Button>
<Toast
isOpen={isOpen}
onCloseClick={() => setIsOpen(false)}
>
<Arrange alignItems="start" gap="small">
<Icon icon={<SvgLink />} />
<Text>You successfully changed Mira Baptista’s role from Viewer to Creator. Please review the email we sent you ok thx bye this is really long wow so long!</Text>
</Arrange>
</Toast>
</>
)}
Toast with longer timeout
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(true)} variant="primary">
Trigger Toast
</Button>
<Toast
isOpen={isOpen}
onCloseClick={() => setIsOpen(false)}
duration="long"
>
<Text>You have successfully learnt that the short timeout is 3s and long is 8s. </Text>
</Toast>
</>
)}
Props
duration
'short' | 'long'
'short'