WEB

HAPTICS

TOAST

• GET STARTED • GET STARTED •
$npm i web-haptics-toast

What you get

Everything built in

Haptics for your toasts, without the ceremony. One import, it works on the browsers people actually use, and it stays quiet everywhere else.

Why haptics

Toasts people can feel

People swipe toasts away without reading them. A buzz is a lot harder to ignore.

Native apps feel finished because of tiny physical cues you barely notice. This brings that feel to the web — no more "I never saw a notification" messages from your users.

  • Confirm actions without shouting on screen.
  • Reassure users the tap actually registered.
  • Feels like a native app, ships as one import.
Explore documentationComing from Sonner

Install

One command. You're done.

Install it, drop the Toaster in your root layout, and every toast can buzz. No providers, no config files, nothing to wire up.

Quick startv1.0.1 · verified

That's it — add <Toaster /> to your root layout and every toast fires with haptics out of the box.

Android

Native

Straight to the Vibration API — every Android browser just handles it.

iOS

Fallbacks

Safari blocks the Vibration API, so patterns are approximated with what WebKit allows.

Desktop

Simulation

Patterns play as soft clicks while you develop. Same code, just audible.

Playground

Dial in your tactical experience

Flip the switches, fire some toasts, feel what changes. Everything on this page is real — no mocks.

Configuration

Anchor grid

Launch center

Manual haptic (no double buzz)

<Toaster 
  position="bottom-right"
  expand={false}
  richColors={false}
  closeButton={false}
  haptics={true}
  hapticsDebug={false}
  hapticsShowSwitch={false}
/>

And many more

Beyond the basics

The smaller things that add up. Every button below actually fires — tap around.

Go native

Buzz without showing a toast at all. Great for primary buttons and moments where another popup would just be noise.

import { triggerHaptic } from 'web-haptics-toast';


triggerHaptic('success');

Custom rhythm

Pass any pattern straight to a toast — [100, 50, 100] is a perfectly good vibration.

triggerHaptic([100, 50, 100]);

Global override

Wire success, error, warning — whatever pattern you want, once, at the root.

<Toaster hapticPatternMap={{
  success: [50, 30]
}} />

Soft selection

The tiny tick iOS makes when you flip a switch. Your toggles get it too.

triggerHaptic('selection');

Total control

Toasts are just IDs — keep the reference, update it, replace loading with success.

toast.dismiss(id);
toast.loading('Working...');

Soft pulse

A lighter tick for tabs, chips, and other small controls.

triggerHaptic('light');

Actions & cancel

Toast with a confirm and cancel. Give each button its own buzz so the choice feels deliberate.

toast('Deploy to production?', {
  action: { label: 'Deploy', onClick: ... },
  cancel: { label: 'Not now' }
});