Basic Toast

PreviousNext

A simple toast notification component with a link action and theme customization

'use client';

import { BasicToast } from '@/ui/BasicToast';
import { type ToasterProps, Toaster, toast } from 'react-hot-toast';
import { getHotToastConfig } from '@/ui/BasicToast.config';

export function BasicToastDemo() {
  const showToast = () => {
    toast.custom(
      (t) => (
        <BasicToast
          title="Get 10% off your first order"
          incentive="Click here"
          href="#"
          theme="dark"
          isVisible={t.visible}
          labels={{ close: 'Close' }}
          onClose={() => toast.dismiss(t.id)}
        >
          Sign up for our newsletter and get 10% off your first order
        </BasicToast>
      ),
      { duration: 10000 },
    );
  };

  return (
    <>
      <Toaster {...(getHotToastConfig() as ToasterProps)} />
      <button onClick={showToast}>Show Toast</button>
    </>
  );
}

Installation

npx shadcn@latest add https://develop.trident-ui.pro.clubmed/r/basic-toast.json

Usage

import { BasicToast } from '@/ui/BasicToast';
import { toast } from 'react-hot-toast';
 
export function Component() {
  const showToast = () => {
    toast.custom(
      (t) => (
        <BasicToast
          title="Get 10% off your first order"
          incentive="Click here"
          href="#"
          theme="dark"
          isVisible={t.visible}
          labels={{ close: 'Close' }}
          onClose={() => toast.dismiss(t.id)}
        >
          Sign up for our newsletter and get 10% off your first order
        </BasicToast>
      ),
      { duration: 10000 }
    );
  };
 
  return <button onClick={showToast}>Show Toast</button>;
}

API Reference

BasicToast

PropTypeDefaultDescription
titlestringrequiredThe main heading text of the toast
childrenReactNodeundefinedMain body content (preferred)
descriptionstringundefinedDeprecated fallback body text when children is not passed
incentivestringrequiredThe call-to-action link text
hrefstringrequiredThe URL for the call-to-action link
themeTheme"dark"The color theme of the toast (affects background color)
isVisiblebooleanrequiredControls the visibility state and animation of the toast
labels{ close }requiredAccessibility label for the close button
iconIconicNamesundefinedOptional icon name from the Trident Icons library
onClick() => voidundefinedCallback function when the link is clicked
onClose() => voidundefinedCallback function when the close button is clicked

Examples

Dark Theme

'use client';

import { BasicToast } from '@/ui/BasicToast';
import { type ToasterProps, Toaster, toast } from 'react-hot-toast';
import { getHotToastConfig } from '@/ui/BasicToast.config';

export function BasicToastDemo() {
  const showToast = () => {
    toast.custom(
      (t) => (
        <BasicToast
          title="Get 10% off your first order"
          incentive="Click here"
          href="#"
          theme="dark"
          isVisible={t.visible}
          labels={{ close: 'Close' }}
          onClose={() => toast.dismiss(t.id)}
        >
          Sign up for our newsletter and get 10% off your first order
        </BasicToast>
      ),
      { duration: 10000 },
    );
  };

  return (
    <>
      <Toaster {...(getHotToastConfig() as ToasterProps)} />
      <button onClick={showToast}>Show Toast</button>
    </>
  );
}

Saffron Theme

'use client';

import { BasicToast } from '@/ui/BasicToast';
import { type ToasterProps, Toaster, toast } from 'react-hot-toast';
import { getHotToastConfig } from '@/ui/BasicToast.config';

export function BasicToastSaffronDemo() {
  const showToast = () => {
    toast.custom(
      (t) => (
        <BasicToast
          title="Get 10% off your first order"
          incentive="Click here"
          href="#"
          theme="saffron"
          isVisible={t.visible}
          labels={{ close: 'Close' }}
          onClose={() => toast.dismiss(t.id)}
        >
          Sign up for our newsletter and get 10% off your first order
        </BasicToast>
      ),
      { duration: 10000 },
    );
  };

  return (
    <>
      <Toaster {...(getHotToastConfig() as ToasterProps)} />
      <button onClick={showToast}>Show Toast</button>
    </>
  );
}

With Icon

'use client';

import { BasicToast } from '@/ui/BasicToast';
import { type ToasterProps, Toaster, toast } from 'react-hot-toast';
import { getHotToastConfig } from '@/ui/BasicToast.config';

export function BasicToastWithIconDemo() {
  const showToast = () => {
    toast.custom(
      (t) => (
        <BasicToast
          title="Get 10% off your first order"
          incentive="Click here"
          href="#"
          theme="dark"
          icon="Trident"
          isVisible={t.visible}
          labels={{ close: 'Close' }}
          onClose={() => toast.dismiss(t.id)}
        >
          Sign up for our newsletter and get 10% off your first order
        </BasicToast>
      ),
      { duration: 10000 },
    );
  };

  return (
    <>
      <Toaster {...(getHotToastConfig() as ToasterProps)} />
      <button onClick={showToast}>Show Toast</button>
    </>
  );
}

Notes

  • The toast is designed to display promotional or informational messages with a single action link
  • The entire toast content acts as a clickable link (except for the close button)
  • The component uses react-hot-toast for toast management
  • The theme prop supports all Trident theme colors and determines the toast's background color
  • The Link component from the Trident library is used for the incentive text styling
  • Prefer children for body content in new code and examples
  • description is still supported for backward compatibility