Skip to Content

Styling & Creative Control

Make your toasts feel at home. web-haptics-toast is designed to be as invisible as you need it to be, or as loud as your brand demands.

Import the base styles once at your root layer:

import 'web-haptics-toast/dist/styles.css';

Global Preferences

Define your signature look globally. Every toast triggered will inherit these styles automatically, keeping your UI consistent and your code clean.

<Toaster
  toastOptions={{
    style: {
      background: '#09090b',
      border: '1px solid rgba(255,255,255,0.1)',
      color: '#fff',
    },
    className: 'my-toast-class',
  }}
/>

Quick Styling

Need a one-off adjustment? You can pass style objects directly to any “toast() call.

toast('Hello World', {
  style: {
    background: 'var(--brand-primary)',
    color: '#fff',
  },
});

Rich Colors & Intent

Human users process color faster than text. By enabling richColors, you transform default toasts into vibrant signals that match their haptic profile—perfect for critical errors or smooth successes.

<Toaster richColors />

You can even go unstyled to use your own design system (like Tailwind):

<Toaster
  toastOptions={{
    unstyled: true,
    classNames: {
      toast: 'bg-zinc-950 border border-zinc-800 rounded-2xl p-4 flex items-center gap-3',
      title: 'text-zinc-100 font-bold',
      description: 'text-zinc-400 text-sm',
      actionButton: 'bg-indigo-600 hover:bg-indigo-500 text-white rounded-lg px-3 py-1',
    },
  }}
/>

Tactical Layouts

web-haptics-toast supports both dir="ltr" and dir="rtl" automatically. When building custom headless toasts, the close button will intelligently flip based on the document direction.

toast.custom((t) => (
  <div className="bg-white p-4 rounded-xl shadow-2xl relative">
    <h1 className="font-bold">Human-Centered Design</h1>
    <p className="text-gray-500">Subtle vibration meets precise layout.</p>
    <button onClick={() => toast.dismiss(t)}>Close</button>
  </div>
));

Iconography

Icons are the visual anchor of a toast. Replace the defaults to match your brand’s voice.

<Toaster
  icons={{
    success: <CheckIcon />,
    loading: <Spinner />,
  }}
/>
Last updated on