Toast

A succinct message that is displayed temporarily. Perfect for notifications, confirmations, and feedback with automatic dismissal, swipe gestures, and comprehensive accessibility features.

Import

import { Toastr, toast } from "@sparrowengg/twigs-react";

Usage

const ToastExample = () => {
  return (
    <>
      <Toastr duration={10000} />
      <Button
        variant="outline"
        onClick={() => {
          toast({
            variant: "success",
            title: "Success!",
            description: "Your action was completed successfully."
          });
        }}
      >
        Show Toast
      </Button>
    </>
  );
};

Examples

Variants and Advanced Features

Explore different toast variants, actions, promise handling, and advanced configurations.

Props

Toastr

Prop	Type	Default
`duration?`	`number`	`10000`
`maxToasts?`	`number`	-
`position?`	`'top-left' \| 'top-center' \| 'top-right' \| 'bottom-left' \| 'bottom-center' \| 'bottom-right'`	`'bottom-center'`
`swipeDirection?`	`'up' \| 'down' \| 'left' \| 'right'`	`'right'`
`swipeThreshold?`	`number`	`50`
`label?`	`string`	`'Notification'`
`css?`	`object`	-

Prop	Type	Default
`variant?`	`'default' \| 'success' \| 'error' \| 'warning' \| 'loading'`	`'default'`
`title?`	`string`	-
`description?`	`string`	-
`action?`	`ReactNode`	-
`icon?`	`ReactElement`	-
`duration?`	`number`	-
`onOpenChange?`	`(open: boolean) => void`	-
`css?`	`object`	-

toast.promise

Prop	Type	Default
`promise?`	`Promise<T>`	-
`loading?`	`ToastOptions`	-
`success?`	`(data: T) => ToastOptions`	-
`error?`	`(error: any) => ToastOptions`	-

Data Attributes

These props are used for the conditional rendering of the components

Prop	Type	Default
`[data-state]?`	`'open' \| 'closed'`	-
`[data-swipe]?`	`'start' \| 'move' \| 'cancel' \| 'end'`	-
`[data-swipe-direction]?`	`'up' \| 'down' \| 'left' \| 'right'`	-

Toast

On this page