StatusMark

Icono de estado de tareas que cambia de pendiente a hecho.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/StatusMark-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
status"pending" | "running" | "done" | "failed" | "cancelled""pending"
progressnumberundefined
labelReactNodeundefined
colorstring"currentColor"
doneColorstring"#22c55e"
errorColorstring"#ef4444"
sizenumber20
strokeWidthnumber2
dashesnumber8
fontSizenumber14
spinDurationnumber1100
arcLengthnumber0.68
drawDurationnumber240
fillOpacitynumber0.06
strikebooleantrue
strikeDelaynumber60
classNamestring""
styleCSSPropertiesundefined

Otros efectos de microinteracciones

  • WakeSlider — Slider de barras que deja una estela según la velocidad.
  • BranchedMenu — Menú desplegable con ramas curvas hacia cada opción.
  • FlipCard — Tarjeta de dos caras que gira en 3D con clic o arrastre.
  • InteractiveHoverButton — Botón cuya flecha y texto se transforman al pasar el ratón.
  • PeekRating — Valoración con estrellas que se levantan en ola al pasar.
  • RefineFrame — Marco que muestra el progreso de una imagen generada sin saltos.