Toast

A toast is a small notification that appears at the bottom of the screen to inform the user of an event or action.

Installation

Make sure to import the Toaster component at the root of your app (see code below).

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex flex-col gap-2">
    <UI.Button
      kind="solid"
      size="md"
      type="button"
      onClick={() => UI.toast({ title: "Toast title", description: "Toast description" })}
    >
      Default Toast
    </UI.Button>

    <UI.Button
      kind="solid"
      size="md"
      type="button"
      onClick={() =>
        UI.toast({
          title: "Toast title",
          description: "Toast description",
          variant: "default",
          state: "info",
        })
      }
    >
      Info Toast (with icon)
    </UI.Button>

    <UI.Button
      kind="solid"
      size="md"
      type="button"
      onClick={() =>
        UI.toast({
          title: "Toast title",
          description: "Toast description",
          variant: "destructive",
        })
      }
    >
      Destructive Toast
    </UI.Button>

    {/**
     * This `Toaster` component is required and should be placed at the root of the app.
     */}
    <UI.Toaster />
  </div>
)

Props

variant

"default" | "destructive"

This updates the visual style of the toast.

title

string (optional)

The title of the toast.

description

string

The description of the toast.

state

"info" | "success" | "warning" | "error" | "loading"

The state of the toast. This adds the corresponding icon to the toast.

persist

boolean (optional)

If true, the toast will not be automatically dismissed.

hideCloseButton

boolean (optional)

If true, the close button will not be displayed.