Toast

Documentation for the <Toast /> component. Learn about the available props and how to use it.

Installation#

To get started, install @exponentialeducation/toast via yarn:

# Yarn

yarn add @exponentialeducation/toast

Basic Example#

A Toast is a lightweight, ephemeral notice from an application in direct response to a user's action.

Toast are built using a Toastercomponent and a toastfunction

Toaster#

The <Toaster />React component will render a list of toasts. You must add it in your application to correct display a toast.

{/* ... */}

import { Toaster, toast } from '@exponentialeducation/toast';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <div className="mt-5 text-center">
        <button
          className="px-2 py-3 bg-success-300 text-white rounded font-bold font-montserrat"
          onClick={() => toast("Success are to notify the user about a process that already happens well done.", {
            variant: "success"
          })}>
          Success toast
        </button>
        <Toaster />
      </div>

      {/* ... */}
    </main>
  )
}

Position#

{/* ... */}

import { Toaster, toast } from '@exponentialeducation/toast';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <div className="mt-5 text-center">
        <button
          className="px-2 py-3 bg-success-300 text-white rounded font-bold font-montserrat"
          onClick={() => toast("Success are to notify the user about a process that already happens well done.", {
            variant: "success",
            position: "bottom-right"
          })}>
          Success toast
        </button>
        <Toaster />
      </div>

      {/* ... */}
    </main>
  )
}

Variants#

{/* ... */}

import { Toaster, toast } from '@exponentialeducation/toast';

function IndexPage() {
  return (
    <main>
      {/* ... */}

      <div className="mt-5 text-center">
        <button
          className="px-2 py-3 bg-success-300 text-white rounded font-bold font-montserrat"
          onClick={() => toast("Success are to notify the user about a process that already happens well done.", {
            variant: "success",
            position: "bottom-right"
          })}>
          Success toast
        </button>
        <Toaster />
      </div>

      {/* ... */}
    </main>
  )
}

Props#

Toaster#

toast()#