Fidus logoFidus Design System

Toast

A non-blocking notification component that appears temporarily to provide feedback about an action or event.

Variants

Positions

With Action Button

Custom Duration

Setup

Wrap your application with ToastProvider and add ToastViewport to enable toasts:

import { ToastProvider, ToastViewport } from '@fidus/ui';

function App() {
  return (
    <ToastProvider>
      <YourApp />
      <ToastViewport position="top-right" />
    </ToastProvider>
  );
}

Props

NameTypeDefaultDescription
variant'success' | 'error' | 'warning' | 'info''info'Visual style of the toast
title*string-Toast title
descriptionstring-Optional description text
durationnumber5000Auto-dismiss duration in milliseconds
dismissiblebooleantrueWhether toast can be manually dismissed
actionLabelstring-Label for action button
onAction() => void-Action button click handler
openboolean-Controlled open state
onOpenChange(open: boolean) => void-Open state change handler

ToastViewport Props

NameTypeDefaultDescription
position'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'top-center' | 'bottom-center''top-right'Position where toasts appear

Usage Guidelines

When to use

  • •To provide feedback after a user action (save, delete, update)
  • •To display non-critical system notifications
  • •For success confirmations that don't require user interaction
  • •To show brief, contextual information that auto-dismisses

Best practices

  • •Keep messages concise and actionable
  • •Use appropriate variants: success for confirmations, error for failures, warning for cautions, info for general notifications
  • •Set reasonable duration (3-7 seconds) based on message length
  • •Position toasts consistently across your application
  • •Limit to one or two toasts visible at once to avoid overwhelming users
  • •Include action buttons only when immediate user response is beneficial

Accessibility

  • •Uses ARIA role: status for non-urgent notifications, alert for errors
  • •Includes ARIA attributes: aria-live and aria-atomic for screen reader announcements
  • •Keyboard accessible: Press Escape to dismiss (when dismissible)
  • •Focus management: Action button receives focus when present
  • •Respects prefers-reduced-motion for animations

Do's and Don'ts

✓ Do

  • •Use toasts for brief, non-critical feedback messages
  • •Match variant to message type (success, error, warning, info)
  • •Allow users to dismiss toasts manually
  • •Keep message text concise and clear
  • •Use consistent positioning across your app
(Click "Show Success" above to see example)

✗ Don't

  • •Don't use toasts for critical information that requires acknowledgment (use dialog instead)
  • •Don't show multiple toasts simultaneously if avoidable
  • •Don't use very long messages that are hard to read quickly
  • •Don't set extremely short durations that don't allow reading time
  • •Don't use toasts for information users need to reference later
Use a Dialog for critical confirmations, not a Toast

Related Components

Alert

For persistent, inline notifications

Dialog

For critical confirmations requiring user action

Banner

For page-level announcements and updates

Resources