CallChip

Chip de llamada a herramienta con progreso y contador en ms.

Cómo instalarlo

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

Cuándo usarlo

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

Props para personalizarlo

PropTipoPor defecto
icon"terminal" | "file" | "search" | "edit" | ReactNode"terminal"
namestring"bash"
argumentstring"npm test"
status"idle" | "running" | "done" | "error""running"
expectedMsnumber2500
sizenumber34
radiusnumber10
colorstring"currentColor"
surfaceColorstring"#27272a"
progressColorstring"currentColor"
progressOpacitynumber0.08
doneColorstring"#22c55e"
errorColorstring"#ef4444"
washOpacitynumber0.14
shakenumber6
showTimerbooleantrue
onRetry() => void-
classNamestring""
styleCSSPropertiesundefined

Otros efectos de microinteracciones

  • 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.
  • SlideCommit — Desliza para confirmar, con estados de carga, éxito y error.
  • StatusMark — Icono de estado de tareas que cambia de pendiente a hecho.