Toast

Brief notification messages that appear temporarily at screen top.

Installation

Add the component to your project using the following command:

Usage

Add the Toast component to your top-level component such as root.tsx or layout.tsx.

app/root.tsx

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <div className="root">{children}</div>
        <Toast />
        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  );
}

To create a toast, use the toastManager object.

component.tsx

import { toastManager } from 'components/selia/toast';

toastManager.create({
  title: 'Toast',
  description: 'This is a toast',
  type: 'success',
});

Or use the anchoredToastManager object to create an anchored toast.

component.tsx

import { anchoredToastManager } from 'components/selia/toast';

anchoredToastManager.create({
  title: 'Toast',
  description: 'This is a toast',
  type: 'success',
  positionerProps: {
    anchor: buttonRef.current,
    sideOffset: 8,
  },
});

Notice that you have to pass the element ref to the anchor prop. This is required for the toast to be anchored to the element.

Toast

Installation

Usage

Examples

Variants

Promise