Toast

Components

Toast

Toasts are messages containing confirmations, notifications, and acknowledgments that require minimal user interaction.

You can use the tool below to create your own toast and explore the various types of toasts that are available.

Notice that the Toast component itself is never actually rendered. Unlike other components, toasts are always rendered programmatically as a result of a user action. Instead of using a Toast component directly, we instead render a ToastContainer component and then fire a toast by calling the toast() function.

The ToastContainer component manages toasts globally for an application, and only needs to be rendered once in your app's component tree.

import { ToastContainer, toast } from '@sproutsocial/racine'

() => {
  const [type, setType] = useState('info')
  const [title, setTitle] = useState('New message')
  const [message, setMessage] = useState(
    'Your message is scheduled for July 26, 2020.'
  )
  const [persist, setPersist] = useState(false)

  const fireToast = (type = 'info') =>
    toast({
      theme: type,
      persist,
      content: (
        <Box>
          {title && (
            <Text
              as="div"
              color="text.header"
              fontWeight="semibold"
            >
              {title}
            </Text>
          )}

          {message && (
            <Text as="div" color="text.body">
              {message}
            </Text>
          )}
        </Box>
      ),
    })

  return (
    <Box>
      {/* ToastContainer is already rendered on Seeds
      <ToastContainer /> */}

      <Box display='flex' alignItems='center' mb={450}>
        <Box flex={1}>
          <SegmentedControl
            selectedValue={type}
            label="Toast type"
            onChange={(e) => setType(e.target.value)}
            mb={0}
          >
            <SegmentedControl.Item value="info">Info</SegmentedControl.Item>
            <SegmentedControl.Item value="success">Success</SegmentedControl.Item>
            <SegmentedControl.Item value="warning">Warning</SegmentedControl.Item>
            <SegmentedControl.Item value="error">Error</SegmentedControl.Item>
          </SegmentedControl>
        </Box>

        <Checkbox
          checked={persist}
          onChange={() => setPersist(!persist)}
          label='Persistent toast'
          ml={500}
        />
      </Box>

      <FormField label="Title">
        {(props) => (
          <Input
            value={title}
            onChange={(e) => setTitle(e.target.value)}
            {...props}
          />
        )}
      </FormField>

      <FormField label="Message">
        {(props) => (
          <Textarea
            value={message}
            onChange={(e) => setMessage(e.target.value)}
            {...props}
          />
        )}
      </FormField>

      <Button appearance="primary" onClick={() => fireToast(type)} width={1}>
        Fire toast
      </Button>
    </Box>
  )
}

Properties

The following options can be passed into the toast() function as an object.

Name	Type	Default	Description
`theme`	`info` `success` `warning` `error`	`info`
`content`	`React.Node`
`icon`	`TypeIconName`
`color`	`TypeColor`
`persist`	`boolean`	`false`	Whether or not the toast should remain on the screen or auto-dismiss
`onClose`	`() => void`
`useTransition`	`boolean`	`true`	Set this to `false` to disable animations
`toastId`	`string`		`toastId` allows you to prevent duplicate toasts with the same message. If your content is a string, we will use that as the toastId and you don't need to do anything. If you have JSX and want to prevent duplicates you can pass the same custom ID with each instance of your message, and the duplicates will be prevented

Types of toasts

Type	Icon	Description
Info		Used when neutral information is being communicated.
Success		Used to communicate to the user when some action is successful.
Warning		Used to communicate to the user when extra care should be taken.
Error		Used to communicate to the user when something has gone wrong.

Recipes

Toast with a link

Toasts can provide links for users to follow up on the notification when appropriate. For better accessibility, toasts with links should be persistent so those using assistive technologies have enough time to navigate to the toast. View usage guidelines on toasts with links for best practices.

() => {
  const fireToast = () =>
    toast({
      content: (
        <Box>
          <Text
            as="div"
            color="text.header"
            fontWeight="semibold"
          >
            Savy L.
          </Text>

          <Text as="div" color="text.body">
            Approved your scheduled message
          </Text>

          <Link href='#'>View calendar</Link>
        </Box>
      )
    })

  return (
    <Box>
      {/* ToastContainer is already rendered on Seeds
      <ToastContainer /> */}

      <Button appearance="primary" onClick={fireToast} width={1}>
        Fire toast
      </Button>
    </Box>
  )
}

Preventing duplicate toasts

If a user is likely to repeat an identical action multiple times, you should avoid firing a separate toast for each action. You can use the toastId option to assign a unique ID to toasts. If multiple toasts share the same ID, the component will refrain from re-firing the toast.

() => {
  const fireToast = () =>
    toast({
      toastId: 'xyz123',
      content: (
        <Text as="div" color="text.body">
          Hello world
        </Text>
      )
    })

  return (
    <Box>
      {/* ToastContainer is already rendered on Seeds
      <ToastContainer /> */}

      <Button appearance="primary" onClick={fireToast} width={1}>
        Fire toast
      </Button>
    </Box>
  )
}