Botones

Estado: Estable

Botón magnético

El botón de siempre con atracción magnética: cuando el cursor se acerca, el botón lo sigue un poco y al alejarse vuelve a su lugar con un rebote físico. Ideal para la acción principal de una página (Reservar, Comenzar).

app/views/… (la demo de arriba)

<div class="flex flex-wrap items-center justify-center gap-4">
  <%= render Ui::ButtonComponent.new(effect: :magnetic, glow: true, size: :lg) do %>
    Reservar clase
    <%= render Ui::IconComponent.new(:arrow_up_right) %>
  <% end %>
  <%= render Ui::ButtonComponent.new(effect: :magnetic, variant: :secondary, size: :lg) do %>Ver horario<% end %>
</div>

Qué hace

  • Física de resorte que conserva la velocidad si el cursor cambia de rumbo.
  • Fuerza de atracción y radio configurables (data-magnetic-strength-value, -radius-value).
  • En táctil no se mueve; con movimiento reducido no se mueve.

Props

Nombre Tipo Default Descripción
effect :magnetic | :spotlight nil Efecto táctil del botón.
variant :primary | :secondary | :outline | :ghost | :link :primary El peso del botón. :destructive (o :danger) sigue sirviendo: es :primary con tone: :danger.
tone :neutral | :danger :neutral El tono de peligro en cualquier peso: lleno en :primary, texto y borde rojos en los demás.
size :sm | :md | :lg :md Altura (sigue el dial de densidad) y tipografía.
glow Boolean false Resplandor suave para la acción principal.
data Hash {} Atributos data; se combinan con el controlador del efecto.

Accesibilidad