Toast

The toast is used to show alerts on top of an overlay. The toast will close itself when the close button is clicked, or after a timeout — the default is 5 seconds. The toast component is used to give feedback to users after an action has taken place.

Toasts can be configured to appear at either the top or the bottom of an application window, and it is possible to have more than one toast onscreen at a time.

Import

import React from 'react';
import { toast, ToastContainer } from '@sajari-ui/core';

import React from 'react';
import { toast, ToastContainer } from '@sajari-ui/core';

Usage

In order to use Toast, you need to put this at the top of your App once

Editable Example

<ToastContainer />

<ToastContainer />

Editable Example

function ToastExample() {
  return (
    <>
      <Button
        onClick={() => {
          toast({
            title: 'Account created.',
            description: "We've created your account for you.",
            appearance: 'success',
          });
        }}
      >
        Show Toast
      </Button>
      <Button margin="ml-2" onClick={() => toast.dismiss()}>
        Dismiss
      </Button>
    </>
  );
}

function ToastExample() {
  return (
    <>
      <Button
        onClick={() => {
          toast({
            title: 'Account created.',
            description: "We've created your account for you.",
            appearance: 'success',
          });
        }}
      >
        Show Toast
      </Button>
      <Button margin="ml-2" onClick={() => toast.dismiss()}>
        Dismiss
      </Button>
    </>
  );
}

Custom component

Display a custom component instead of the default Toast UI. The native option will not work using this method.

Editable Example

function Example() {
  return (
    <Button
      onClick={() =>
        toast(
          () => (
            <Box
              margin="m-3"
              padding={['py-2', 'px-4']}
              textColor="text-white"
              backgroundColor="bg-blue-500"
              borderRadius="rounded-md"
            >
              Hello world!
            </Box>
          ),
          {
            position: 'bottom-left',
          },
        )
      }
    >
      Show Toast
    </Button>
  );
}

function Example() {
  return (
    <Button
      onClick={() =>
        toast(
          () => (
            <Box
              margin="m-3"
              padding={['py-2', 'px-4']}
              textColor="text-white"
              backgroundColor="bg-blue-500"
              borderRadius="rounded-md"
            >
              Hello world!
            </Box>
          ),
          {
            position: 'bottom-left',
          },
        )
      }
    >
      Show Toast
    </Button>
  );
}

Success

Editable Example

function Example() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Account created.',
          description: "We've created your account for you.",
          appearance: 'success',
        })
      }
    >
      Show Success Toast
    </Button>
  );
}

function Example() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Account created.',
          description: "We've created your account for you.",
          appearance: 'success',
        })
      }
    >
      Show Success Toast
    </Button>
  );
}

Warning

Editable Example

function Example() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Something went wrong.',
          description: "We couldn't process all of your records.",
          appearance: 'warning',
        })
      }
    >
      Show Warning Toast
    </Button>
  );
}

function Example() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Something went wrong.',
          description: "We couldn't process all of your records.",
          appearance: 'warning',
        })
      }
    >
      Show Warning Toast
    </Button>
  );
}

Error

Error toasts are persisted by default.

Editable Example

function ErrorToast() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Something went wrong.',
          description: 'Unable to create user account.',
          appearance: 'error',
        })
      }
    >
      Show Error Toast
    </Button>
  );
}

function ErrorToast() {
  return (
    <Button
      onClick={() =>
        toast({
          title: 'Something went wrong.',
          description: 'Unable to create user account.',
          appearance: 'error',
        })
      }
    >
      Show Error Toast
    </Button>
  );
}

Native notifications

Using the native prop you can also spawn a native browser notification, where supported. This is useful if the user has left a long running process and you want to alert them.

Editable Example

function NativeExample() {
  return (
    <Button
      onClick={() =>
        toast(
          {
            title: 'Account created.',
            description: "We've created your account for you.",
            status: 'success',
          },
          { native: true },
        )
      }
    >
      Show Toast
    </Button>
  );
}

function NativeExample() {
  return (
    <Button
      onClick={() =>
        toast(
          {
            title: 'Account created.',
            description: "We've created your account for you.",
            status: 'success',
          },
          { native: true },
        )
      }
    >
      Show Toast
    </Button>
  );
}

Position

Using the position prop you can adjust where your toast will be popup from.

Editable Example

function PositionExample() {
  return (
    <Button
      onClick={() =>
        toast(
          {
            title: 'Account created.',
            description: "We've created your account for you.",
            status: 'success',
          },
          { position: 'bottom-left' },
        )
      }
    >
      Show Toast
    </Button>
  );
}

function PositionExample() {
  return (
    <Button
      onClick={() =>
        toast(
          {
            title: 'Account created.',
            description: "We've created your account for you.",
            status: 'success',
          },
          { position: 'bottom-left' },
        )
      }
    >
      Show Toast
    </Button>
  );
}

Props

Name	Type	Default	Description
`title`	`string`		The title of the toast.
`closeable`	`boolean`	`true`	If `true` adds a close button to the toast.
`onClose`	`function`		Callback function to close the toast.
`description`	`React.ReactNode`		The description of the toast.
`appearance`	`success`, `error`, `warning`, `info`		The status of the toast.
`duration`	`number`	`5000ms`	Duration before dismiss in milliseconds, or `null` to never dismiss.
`position`	`top-center`, `top-left`, `top-right`, `bottom-center`, `bottom-left`, `bottom-right`	`bottom`	Position the toast will popup out from.
`render`	`(props: {onClose:() => void, id: string}) => React.ReactNode`		The description of the toast.
`native`	`boolean`	`false`	Whether to send a native browser notification along with the toast.