Botones

Estado: Beta

Botón con luz

Una luz suave sigue al cursor por la superficie del botón y enciende su borde de 1px. Para acciones secundarias que merecen un poco de vida sin competir con la principal.

app/views/… (la demo de arriba)

<div class="flex flex-wrap items-center justify-center gap-4">
  <%= render Ui::ButtonComponent.new(effect: :spotlight, variant: :secondary, size: :lg) do %>Comprar paquete<% end %>
  <%= render Ui::ButtonComponent.new(effect: :spotlight, variant: :outline, size: :lg) do %>Regalar clase<% end %>
</div>

Qué hace

  • La luz es CSS puro (radial-gradient); el JS solo escribe la posición una vez por cuadro.
  • El borde se ilumina con una máscara, sin elementos extra.
  • En táctil la superficie se queda quieta.

Props

Nombre Tipo Default Descripción
effect :spotlight nil Activa la luz que sigue al cursor.
variant :secondary | :outline | … :primary Luce mejor en superficies oscuras o con borde.

Accesibilidad