SlingButton

Botón de enviar que se tensa como un tirachinas.

Cómo instalarlo

npx shadcn@latest add https://reactbits.dev/r/SlingButton-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
childrenReactNodeundefined
onSend() => void-
padColorstring"#f5f5f5"
iconColorstring"#18181b"
accentColorstring"#f5f5f5"
wellColorstring"#27272a"
bandColorstring"#52525b"
sizenumber56
strokeWidthnumber3
armAtnumber48
maxPullnumber160
launchSpeednumber2600
recoilnumber0.2
flightnumber120
particlesnumber14
spreadnumber60
axis"any" | "horizontal" | "vertical""any"
tapSendsbooleantrue
disabledbooleanfalse
ariaLabelstring"Send"
classNamestring""

Otros efectos de microinteracciones

  • SwipeToast — Notificación que se descarta deslizando y se consume sola.
  • WarmTooltip — Tooltips agrupados: el primero espera y los siguientes aparecen al instante.
  • CallChip — Chip de llamada a herramienta con progreso y contador en ms.
  • FolderFloat — Carpeta que se abre y deja flotar sus notas.
  • JellyRadio — Grupo de opciones cuya selección se hincha como gelatina.
  • PromptBar — Caja de chat con fuentes @, comandos /, modelo y dictado.