Toast

The Toast component offers feedback to the user following an action.

Preview
Code

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/toast

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  ToastRoot,
  ToastContent,
  ToastViewport,
  ToastClose,
} from '@melio-ui/toast';

ToastRoot: All parts of the toast are included.
ToastContent: The toast content.
ToastViewport: This is the fixed area where the toast notification appears.
ToastClose: A button for dismissing the toast message early.

Another way to import

'use client';

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

<Toast.Root>
  <Toast.Content>
    Notification
    <Toast.Close asChild>
      <button type="button">Close</button>
    </Toast.Close>
  </Toast.Content>
  <Toast.Viewport />
</Toast.Root>;

'use client' must be used when rendering on the server side.

API Reference

ToastRoot

All parts of the toast are included.

Prop	Type	Default	Description
open	`boolean`	-	Sets whether the toast content is open or closed.
defaultOpen	`boolean`	-	When first rendered, the toast content is in an opened state. Use when there is no need to control the opened state.
duration	`number`	5000	The duration in milliseconds for the toast to auto-close, which overrides the provider's setting.
onOpenChange	`(open: boolean) => void`	-	This is an event handler that is triggered when the open state of the toast content changes.

ToastContent

The toast content.

Data attribute	Values
[data-state]	"open" \| "closed"

ToastViewport

This is the fixed area where the toast notification appears.

Prop	Type	Default	Description
placement	`TypeAttributes.Placement "top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right"`	"top"	Specifies the location of the value.

Data attribute	Values
[data-placement]	"top" \| "top-left" \| "top-right" \| "bottom" \| "bottom-left" \| "bottom-right"

ToastClose

A button for dismissing the toast message early.

Prop	Type	Default	Description
asChild	`boolean`	-	Changes the default rendering element passed as a child, merging its props and behavior.

Examples

Placement Settings

function PlacementToast() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setOpen(true);
        }}
      >
        Open Toast
      </button>

      <ToastRoot open={open} onOpenChange={setOpen}>
        <ToastContent>
          <div style={{ backgroundColor: '#dffadc', height: 50, padding: 15, color: 'black' }}>
            Notification
          </div>
        </ToastContent>
        <ToastViewport placement="bottom-right" />
      </ToastRoot>
    </>
  );
}

render(<PlacementToast />);

Duration Settings

function DurationToast() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setOpen(true);
        }}
      >
        Open Toast
      </button>

      <ToastRoot duration={1000} open={open} onOpenChange={setOpen}>
        <ToastContent>
          <div style={{ backgroundColor: '#dffadc', height: 50, padding: 15, color: 'black' }}>
            Notification
          </div>
        </ToastContent>
        <ToastViewport />
      </ToastRoot>
    </>
  );
}

render(<DurationToast />);

Close through user action.

function CloseToast() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button
        type="button"
        onClick={() => {
          setOpen(true);
        }}
      >
        Open Toast
      </button>

      <ToastRoot open={open} onOpenChange={setOpen}>
        <ToastContent
          style={{
            display: 'grid',
            gridTemplateAreas: `"title action" "description action"`,
            gridTemplateColumns: 'auto max-content',
            columnGap: 15,
            alignItems: 'center',
            backgroundColor: '#dffadc',
            color: 'black',
          }}
        >
          <div
            style={{
              gridArea: 'title',
              height: 50,
              padding: 15,
            }}
          >
            Notification
          </div>
          <ToastClose style={{ gridArea: 'action', padding: 15 }} asChild>
            <button type="button">Undo</button>
          </ToastClose>
        </ToastContent>
        <ToastViewport />
      </ToastRoot>
    </>
  );
}

render(<CloseToast />);

Tabs

Tooltip