UI Components

Toast Notifications

Toast notifications provide feedback to users about actions, events, or system status. Compact design with support for icons, descriptions, and close buttons. Based on Sonner library for smooth animations and positioning.

Info Type

Used for informational messages that don't require immediate action.

Success Type

Used to confirm successful completion of an action.

Warning Type

Used to alert users about potential issues that need attention.

Error Type

Used to notify users about errors or failed operations.

Usage Example

Example code for implementing Toast notifications

import { Toaster, toast, Button } from '@monorepo/ui/DesignSystem';
import { Info, CheckCircle, AlertTriangle, XCircle } from 'lucide-react';

// 1. Add Toaster to your root layout or app component
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Toaster position="top-center" />
        {children}
      </body>
    </html>
  );
}

// 2. Use toast function to show notifications
<Button
  onClick={() =>
    toast({
      type: 'info',
      title: 'New message',
      description: 'You have a new message from John',
      leftIcon: <Info className="w-[18px] h-[18px] text-gray-700" />,
      showCloseButton: true,
      duration: 4000, // Optional, default is 4000ms
    })
  }
>
  Show Toast
</Button>

// Success toast
toast({
  type: 'success',
  title: 'Changes saved',
  leftIcon: <CheckCircle className="w-[18px] h-[18px] text-gray-700" />,
});

// Warning toast
toast({
  type: 'warning',
  title: 'Storage almost full',
  description: "You're using 90% of your storage space",
  leftIcon: <AlertTriangle className="w-[18px] h-[18px] text-gray-700" />,
  showCloseButton: true,
});

// Error toast
toast({
  type: 'error',
  title: 'Error occurred',
  description: 'Failed to save changes. Please try again.',
  leftIcon: <XCircle className="w-[18px] h-[18px] text-gray-700" />,
  showCloseButton: true,
});

Toast Options

OptionTypeDefaultDescription
type'info' | 'success' | 'warning' | 'error''info'Toast type (determines background and icon container color)
titleReactNode-Toast title (required)
descriptionReactNode-Toast description (optional)
leftIconReactNode-Left icon (optional, use 18x18px icons)
showCloseButtonbooleanfalseShow close button (optional)
durationnumber4000Duration in milliseconds (optional)

Design Specifications

  • Width: Full width on mobile (with 16px margins), Fixed 240px on desktop
  • Padding: 8px
  • Gap: 4px between elements
  • Border Radius: 4px
  • Icon Container: 32x32px with rounded corners
  • Title: Inter 600, 14px, line-height 1.2, color #0D161F
  • Description: Inter 400, 12px, line-height 1.4, color #798591
  • Close Button: 24x24px with 18x18px icon
  • Position: Top-center by default (configurable: top-left, top-right, top-center, bottom-left, bottom-right, bottom-center)
  • Responsive Behavior:
  • • Mobile: Full width with 16px margins on each side
  • • Desktop: Fixed 240px width, centered in position
  • Background Colors (from tokens):
  • • Info: blue-100 (#eaeffc)
  • • Success: green-100 (#eafaf4)
  • • Warning: yellow-100 (#fefce9)
  • • Error: red-100 (#fceaea)
  • Border Colors (from tokens):
  • • Info: blue-500 (#6d8ded)
  • • Success: green-500 (#69dbaf)
  • • Warning: yellow-500 (#f6ea68)
  • • Error: red-500 (#e96c6c)
  • Icon Container Colors (from tokens):
  • • Info: blue-100 (#eaeffc)
  • • Success: green-100 (#eafaf4)
  • • Warning: yellow-100 (#fefce9)
  • • Error: red-100 (#fceaea)