Guides
Get started Component definition Designing custom elements Development best practices
Styles
Colors Typography Spacing Shadows Radii
Components
Avatar Button Checkbox ColorPicker Dropdown FormField Icon IconButton IconTile Illustration Indicator Link List Logo Menu Modal NotificationBar Pill Radio Select Skeleton Switch Tabs Text Textarea TextButton TextInput Typeahead Toast Tooltip
Loaders
Loader LogoLoader EllipsesLoader WaveformLoader
Layout
Align Arrange Backdrop Container ErrorContainer Popover Spacer Split
Icons
Icon set
Illustrations
Illustration set
Patterns
Disabled styles Errors Forms Discovery Plan upgrade Settings
Utilities
CSS utilities CSS variables Responsive
Playground
Layout recipes Showcase

Toast (deprecated)

Usage Guidelines

Deprecated

This component is deprecated. Please use @atlaskit/flag

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>
  </>
)}

() => {
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>
  </>
)}

() => {
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>
  </>
)}

() => {
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>
  </>
)}

() => {
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

name

type

default

zIndex

number

1100

duration

'short' | 'medium' | 'long'

'short'

platform

'web-app' | 'chrome-extension'

'web-app'

children

React.ReactNode

isOpen

boolean

onCloseClick

() => void

Guides

Styles

Components

Loaders

Layout

Icons

Illustrations

Patterns

Utilities

Playground