SwipeToast

Notificación que se descarta deslizando y se consume sola.

Código: RODD·MI·029
Familia: Microinteracciones
Origen: React Bits (David Haz) · Licencia MIT + Commons Clause

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/SwipeToast-TS-TW

Cuándo usarlo

Para acciones frecuentes: confirmar, marcar, valorar. El feedback convierte un clic en una sensación.

Props para personalizarlo

Prop	Tipo	Por defecto
title	ReactNode	"File archived"
description	ReactNode	""
icon	ReactNode	undefined
actionLabel	ReactNode	""
onAction	() => void	-
open	boolean	true
onClose	(reason) => void	-
background	string	"#27272a"
color	string	"#f5f5f5"
fuseColor	string	"#f5a524"
width	number	356
radius	number	12
slideMs	number	400
settleBounce	number	0.2
swipeDistance	number	40
duration	number	4000
fuse	"bottom" \| "top" \| "none"	"bottom"
pauseOnHover	boolean	true
closeButton	boolean	false
inline	boolean	false
dismissible	boolean	true
className	string	""

Otros efectos de microinteracciones

AnimatedBadge — Etiqueta con brillo animado para novedades.
CodeSlots — Campo de código de un solo uso (OTP) con animación por dígito.
FuseButton — Botón con “deshacer” sobre una mecha que se consume.
LatticeLoader — Indicador de estado de agente IA con rejilla de puntos en ola.
PulsatingButton — Botón que late para llamar la atención.
RubberSegment — Control segmentado con un selector de goma elástica.