Variants & Themes

Toastex comes fully equipped with 7 distinct architectural variants and 2 powerful themes to match any design language.

Themes

By default, Toastex supports dark and light themes. The theme completely overhauls the internal CSS variables of the toast, maintaining perfect contrast ratios.

typescript

Toastex.success('Operation completed', { theme: 'dark' });
Toastex.error('Failed to load', { theme: 'light' });

Variants

1. Default

The standard, highly reliable toast notification. Best for general use cases where you need a standard icon-left, content-right layout.

typescript

Toastex.info('Standard notification', { variant: 'default' });

2. Swift

A sleek, Apple-inspired layout featuring a solid colored vertical bar on the left edge denoting the severity type. Perfect for minimalist dashboards.

typescript

Toastex.warning('System update required', { variant: 'swift' });

3. Chat

Designed for messaging apps or user-driven events. It supports rendering a custom avatar via the logoUrl parameter.

typescript

Toastex.info('New message received', { 
  variant: 'chat',
  title: 'Alice',
  logoUrl: 'https://i.pravatar.cc/150?u=alice'
});

4. Minimal

Absolutely no icons, no titles. Just pure, unadulterated text. Perfect for ultra-minimalist UIs where space is at a premium.

typescript

Toastex.success('Draft saved.', { variant: 'minimal' });

5. Outline

A stark, high-contrast variant that removes the background fill and relies entirely on a crisp, colored border.

typescript

Toastex.error('Connection lost', { variant: 'outline' });

6. Liquid Glass

A beautiful iOS-inspired notification with a heavily blurred, translucent background. Adapts dynamically to its underlying colors.

typescript

Toastex.show({
  title: 'iMessage',
  message: 'Hey! Are we still on for the meeting?',
  variant: 'liquid-glass',
  logoUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/51/IMessage_logo.svg'
});

7. Liquid Chat

A sophisticated, stacked iOS/macOS notification layout featuring large avatars, app badges, subtitles, and timestamps against a rich frosted-glass background.

typescript

Toastex.show({
  title: 'Armando Cajide',
  subtitle: 'Gym Training',
  message: 'Anyone up for powerlifting this weekend?',
  time: 'now',
  variant: 'liquid-chat',
  avatarUrl: 'https://avatars.githubusercontent.com/u/9919?v=4',
  appIconUrl: 'https://upload.wikimedia.org/wikipedia/commons/5/51/IMessage_logo.svg'
});