Toast

1.0.8

Displays a message for a short period of time. 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.

About

This component is a version of Sonner (opens in a new tab), developed and maintained by Emil (opens in a new tab).

Installation

pnpm add @inpulse-ds/toast

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.

layout.tsx

import { Toaster } from '@inpulse-ds/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-ds/toast';
 
toast("Hello world!");

Examples

Simple

With title

With action button

With cancel button

Info

Warning

Success

Error

Promise

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

Duration

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

toast('Olá, mundo!', { 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" />

Possible values are:

top-left	top-center	top-right
bottom-left	bottom-center	bottom-right

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('Olá, mundo!', { 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 />

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.

Tabs Tooltip