Toast

The Toast component displays temporary notification messages that appear at the top-right of the screen. It provides a flexible way to show success messages, errors, or other notifications to users.

Demo

React

Vue

Usage

React

import {
  Button,
  Toast,
  createToaster,
} from '@fintech-sandpit/ui/react';
import { faXmark } from '@fortawesome/free-solid-svg-icons';
import { Icon } from '@fintech-sandpit/ui/react';

const toaster = createToaster({
  placement: 'bottom-start',
});

function MyComponent() {
  const showToast = () => {
    toaster.create({
      type: 'success',
      title: 'Success!',
      description: 'Your changes have been saved.',
    });
  };

  return (
    <>
      <Toast.Toaster toaster={toaster}>
        {toast => (
          <Toast.Root key={toast.id}>
            <Toast.Title>
              {toast.title}
            </Toast.Title>

            <Toast.Description>
              {toast.description}
            </Toast.Description>

            {toast.closable && <Toast.CloseTrigger />}
          </Toast.Root>
        )}
      </Toast.Toaster>

      <Button
        colorScheme="primary"
        onClick={showToast}
      >
        Show Toast
      </Button>
    </>
  );
}

Vue

<script setup lang="ts">
import { faXmark } from '@fortawesome/free-solid-svg-icons';
import {
  createToaster,
  Button,
  Icon,
  Toast,
} from '@fintech-sandpit/ui/vue';

const toaster = createToaster({
  placement: 'bottom-start',
});

const showToast = () => {
  toaster.create({
    title: 'Success!',
    description: 'Your changes have been saved.',
    type: 'success',
  });
};
</script>

<template>
  <Toast.Toaster
    v-slot="toast"
    :toaster="toaster"
  >
    <Toast.Root :key="toast.id">
      <Toast.Title>
        {{ toast.title }}
      </Toast.Title>

      <Toast.Description>
        {{ toast.description }}
      </Toast.Description>

      <Toast.CloseTrigger v-if="toast.closable" />
    </Toast.Root>
  </Toast.Toaster>

  <Button
    color-scheme="primary"
    @click="showToast"
  >
    Show Toast
  </Button>
</template>

Props

Toast Root Props

Name	Type	Default	Description
placement	ToasterPlacement	top-end	Placement of the toast container
gap	number	8	Gap between toast items

Toast Options

Name	Type	Default	Description
title	string	—	Title of the toast
description	string	—	Description text of the toast
type	ToastType	info	Type of the toast
duration	number	5000	Duration in milliseconds before auto-dismissing (0 to disable)

Components

Toast.Root

The root component (Toaster) that manages all toast notifications. Should be placed at the root of your application, typically in the main layout or App component.

Toast.Toast

Individual toast component. Typically rendered automatically by the Toaster, but can be used directly for custom implementations.

Toast.Title

The title component for a toast notification.

Toast.Description

The description component for a toast notification.

Toast.CloseTrigger

A button that closes the toast when clicked. Automatically included in toast notifications.

Hook

useToast

A hook that provides methods to create and manage toast notifications.

Methods:

• create(options) - Creates a new toast notification
• dismiss(id) - Dismisses a specific toast by ID
• dismissAll() - Dismisses all toast notifications

Types

type ToasterPlacement = 'top-start' | 'top' | 'top-end' | 'bottom-start' | 'bottom' | 'bottom-end'
type ToastType = 'info' | 'success' | 'warning' | 'error' | 'loading'