DUToastViewport + duToast

Feedback

Global toast notifications. Mount viewport once, call duToast().

import { DUToastViewport, duToast } from 'deri-ui';
Live preview
typescript
<>
  <DUButton onClick={() => duToast({ title: 'Saved', message: 'OK', tone: 'success' })}>Notify</DUButton>
  <DUToastViewport />
</>

Props

PropTypeDefaultDescription
duToast({ title, message, tone, duration })object—Push API
tonedefault | success | warning | danger | info—Style

Usage

import { DUToastViewport, duToast } from 'deri-ui';

<>
  <DUButton onClick={() => duToast({ title: 'Saved', message: 'OK', tone: 'success' })}>Notify</DUButton>
  <DUToastViewport />
</>

Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.

Related

DUAlertDUBanner
← DUEmptyStateDUCounter →

© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.