Purpose
Toasts are used to show confirmations of user action.
Dos
- Keep messaging clear and short
Don’ts
- Show more than one toast at a time
- Use for warning or error alerts (instead, use NotificationBar)
Variants
Toasts should behave and appear consistently within a platform and also respect the unique context and needs of each platform. Each platform has its own Toast variant as a result.
chrome-extension toasts will come down from the top of the screen to keep it near the recorder itself.web-app toasts come up from the bottom center of the screen, which interferes with other web-app features the least and a standard industry practice.
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 />} color="bodyInverse" />
<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>
</>
)}
Toast in chrome extension
() => {
const [isOpen, setIsOpen] = React.useState(false)
return (
<>
<Button onClick={() => setIsOpen(true)} variant="primary">
Trigger Toast
</Button>
<Toast
isOpen={isOpen}
onCloseClick={() => setIsOpen(false)}
duration="short"
platform="chrome-extension"
>
<Text>This is a toast in the chrome extension. It shows up at the top!</Text>
</Toast>
</>
)}
Props
duration
'short' | 'long'
'short'
platform
'web-app' | 'chrome-extension'
'web-app'