Overlays

Toast

3.0.0

Dependencies:
∟Direct: 2
∟Peer: 7
Source code ↗
Check on NPM ↗

Overview

Displays a message for a short period of time.

Preview
Code

import { Toast } from '@inpulse-ui/toast';

export function Demo() {
  return <Toast />;
}

About

This component is our take on Sonner, developed and maintained by Emil.

Unlike a Dialog, Toast does not interrupt the user’s experience but complements the action he just performed. Unlike other options you may find out there, this one limits the number of messages that can be displayed at the same time, preventing the interface from becoming cluttered - in addition to being highly customizable.

Gesture support

All messages can be controlled with gestures such as swipe and click on mobile. When clicking on a toast, all messages are expanded. When performing the swipe down movement, the message is discarded.

Installation

pnpm add @inpulse-ui/toast

bun add @inpulse-ui/toast

yarn add @inpulse-ui/toast

npm install @inpulse-ui/toast

API Reference

Toaster

Set some defaults for all the toast notifications.

Prop	Type	Default Value	Required
`expand`	`boolean`	`false`	No
`gap`	`number`	`14`	No
`mobileOffset`	`string \| number \| object`	`16px`	No
`offset`	`string \| number \| object`	`32px`	No
`position`	`enum`		No
`toastOptions`	`object`	-	No
`richColors`	`boolean`	`false`	No
`visibleToasts`	`number`	`3`	No

toast()

Defines configurations for a single toast notification.

Prop	Type	Default Value	Required
`closeButton`	`boolean`	`false`	No
`dismissible`	`boolean`	`true`	No
`duration`	`number`	`4000`	No
`onAutoClose`	`function`	-	No
`onDismiss`	`function`	-	No

Usage

The Toaster component is responsible for rendering messages. It can be inserted anywhere in the application, even on the server side as in Next.js’ layout.tsx.

import { Toaster } from '@inpulse-ui/toast';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="pt-br">
      <body>
        {children}
        <Toaster />
      </body>
    </html>
  );
}

After that, simply activate the toast method - which is also exported by DS - passing the message you want to display.

import { toast } from '@inpulse-ui/toast';

toast("Hello, world!");

Examples

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast("Hello, world!")}
    >
      <Hand />
    </Button>
  );
}

With title

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast("Hello, world!", {
        description: format(new Date(), "dd 'de' MMM 'de' yyyy kk:mm:ss", { locale: ptBR }),
      })}
    >
      <Hand />
    </Button>
  );
}

With action button

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => {
        toast("Hello, world!", {
          description: format(new Date(), "dd 'de' MMM 'de' yyyy kk:mm:ss", { locale: ptBR }),
          action: {
            label: "OK",
            onClick: () => console.log("OK"),
          },
        });
      }}
    >
      <Hand />
    </Button>
  );
}

With cancel button

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => {
        toast("Hello, world!", {
          description: format(new Date(), "dd 'de' MMM 'de' yyyy kk:mm:ss", { locale: ptBR }),
          cancel: {
            label: "Cancel",
            onClick: () => console.log("Cancel"),
          },
        });
      }}
    >
      <Hand />
    </Button>
  );
}

Info

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast.info("This task is in progress")}
    >
      <Hand />
    </Button>
  );
}

Warning

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast.warning("This task will expire in 2 days")}
    >
      <Hand />
    </Button>
  );
}

Success

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast.success("Task created successfully")}
    >
      <Hand />
    </Button>
  );
}

Error

Preview
Code

import { toast } from '@inpulse-ui/toast';

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => toast.error("This task cannot be deleted")}
    >
      <Hand />
    </Button>
  );
}

Promise

It is possible to use a Promise to wait for the toast to close.

Preview
Code

import { toast } from '@inpulse-ui/toast';

const promise = () => new Promise((resolve) => setTimeout(() => resolve({ name: 'Jo Santana' }), 2000));

export function Demo() {
  return (
    <Button
      icon
      size="md"
      onClick={() => {
        toast.promise(promise, {
          loading: 'Loading...',
          success: (data) => {
            return `${data.name} has been added to the group.`;
          },
          error: 'Error',
        });
      }}
    >
      <Hand />
    </Button>
  );
}

Duration

It is possible to change the duration of the toast through the duration property, directly in the toast method.

toast('Hello, world!', { duration: 5000 });

Position

It is possible to change the position of the toast through the position property, which can be applied to the Toaster component.

<Toaster position="top-left" />

It is also possible to change the position of each message individually. To do this, simply pass the position property directly into the toast method. This way, the position of the other toasts will not be affected.

toast('Hello, world!', { position: 'top-right' });

Colors

It is possible to apply colors to toast through the richColors property. Without this, messages will come in the default color, only the iconography will change.

<Toaster richColors />

Project

About Us

Built with by Jo Santana in Brazil.