The toast component is used to give feedback to users after an action has taken place.

This is a custom-made component according to our styling conventions, limiting the available props and styling options.

Anatomy

Import the component.

import { Toast } from "@rafty/ui";

<Toast />;

Usage

The toast will close itself after a timeout.

Toasts by default appears at the top of an application window, and it is possible to have more than one toast onscreen at a time.

<Toast
  severity="success"
  title="Success Banner"
/>

Title

The title is another required prop for in toast.

<Toast
  severity="warning"
  title="This is sample"
/>

Message

The message prop is used to display description below title in toast

<Toast
  message="Data uploaded to the server. Fire on!"
  severity="info"
  title="Success Banner"
/>

Severity

There are 4 severity options in toast: error, warning, info & success. It is a required prop.

<div className="w-full flex flex-col gap-4 items-center">
  <Toast
    severity="success"
    title="Success Banner"
  />
  <Toast
    severity="warning"
    title="Success Banner"
  />
  <Toast
    severity="info"
    title="Success Banner"
  />
  <Toast
    severity="error"
    title="Success Banner"
  />
</div>

Visible

The visible prop is used to manage the visibility of toast.

<Toast
  severity="info"
  title="Success Banner"
  visible
/>