Getting Started
Components
- Advanced Toast
- ArrowButton
- Arrows
- Avatar
- Backdrop
- Basic Toast
- Breadcrumb
- Button
- CardBackground
- Card
- ChatButton
- Checkbox
- Checkboxes
- Chip
- ChoiceExpander
- Clickable
- Date Field
- Dropdown
- ElasticHeight
- ExpandableCard
- Filter
- FormCheckbox
- Form Control
- Form Label
- HamburgerIcon
- Heading
- Image
- Link
- Loader
- Number Field
- Pagination
- Password
- Phone Field
- Popin
- Portal
- Prose
- Radio Group
- Radio
- Range
- Select
- SidebarLayout
- Spinner
- Switch
- Tabs
- Tag
- TextField
- ValidationMessage
'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
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | required | The main heading text of the toast |
children | ReactNode | undefined | Main body content (preferred) |
description | string | undefined | Deprecated fallback body text when children is not passed |
incentive | string | required | The call-to-action link text |
href | string | required | The URL for the call-to-action link |
theme | Theme | "dark" | The color theme of the toast (affects background color) |
isVisible | boolean | required | Controls the visibility state and animation of the toast |
labels | { close } | required | Accessibility label for the close button |
icon | IconicNames | undefined | Optional icon name from the Trident Icons library |
onClick | () => void | undefined | Callback function when the link is clicked |
onClose | () => void | undefined | Callback 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-toastfor toast management - The theme prop supports all Trident theme colors and determines the toast's background color
- The
Linkcomponent from the Trident library is used for the incentive text styling - Prefer
childrenfor body content in new code and examples descriptionis still supported for backward compatibility