Botones

Estado: Beta

Botón que se hunde

Un botón con canto: la cara descansa sobre su base y al presionarla baja hasta casi tocarla; al soltar regresa con un rebote pequeño de resorte. Se siente igual con el dedo, el mouse o el teclado. Para la acción que se tiene que sentir: reservar, pagar, hacer check-in.

app/views/… (la demo de arriba)

<div class="flex flex-wrap items-center justify-center gap-2.5">
  <%= render Ui::PressButtonComponent.new do %>Reservar clase<% end %>
  <%= render Ui::PressButtonComponent.new(variant: :secondary) do %>Ver horario<% end %>
</div>

Qué hace

  • La cara baja con un resorte rápido y sube con uno subamortiguado: si sueltas a medio camino, regresa desde donde iba.
  • El canto se calcula de la luz del estudio (más oscuro, o más claro si la tecla es casi negra).
  • Al pasar el cursor la tecla se alza 1px, sin rebote; en táctil no.
  • Sin JS sigue hundiéndose con :active.

Props

Nombre Tipo Default Descripción
variant :primary | :secondary :primary Cara con la luz del estudio, o superficie con borde de 1px.
size :sm | :md | :lg :md Alto (sigue el dial de densidad) y profundidad del canto (3px en :sm, 4px en :md y :lg).
href String nil Lo vuelve un enlace <a> con el mismo gesto.
type String "button" Tipo del <button>; "submit" para enviar su formulario.
disabled Boolean false Deshabilita el botón; en un enlace quita el href y marca aria-disabled.
full_width Boolean false Ocupa todo el ancho de su contenedor.
data Hash {} Atributos data; el controlador y las acciones se combinan con los tuyos.

Accesibilidad