Admin

Estado: Estable

Pastilla de estado

Unifica cómo se ven los estados de pedidos, pagos, citas, suscripciones y usuarios. La etiqueta sale de los textos de la app (statuses.<estado> en su es.yml, con los de la gema de respaldo) y el tono del estado; el color nunca va solo.

Confirmada Pendiente Cancelada Inasistencia Activo Expirado Agotado Pagado Reembolsado En curso

app/views/… (la demo de arriba)

<div class="flex max-w-sm flex-wrap justify-center gap-2">
  <% %w[confirmed pending cancelled no_show active expired depleted succeeded refunded].each do |status| %>
    <%= render Ui::StatusPillComponent.new(status: status) %>
  <% end %>
  <%= render Ui::StatusPillComponent.new(status: "live", label: "En curso", pulse: true) %>
</div>

Qué hace

  • Tonos por estado para pedidos, pagos, citas, suscripciones y campañas.
  • Reemplaza los badges de colores sueltos de las vistas de un panel.

Props

Nombre Tipo Default Descripción
status String nil El estado del modelo (confirmed, pending, expired…).
label String t("statuses.#{status}") Texto a mostrar. Sin él, statuses.<estado> de la app o eclipse_ui.statuses.<estado> de la gema.
tone :success | :warning | :danger | :accent | :neutral según status Fuerza el tono (:destructive y :error también sirven). class:, data:, id: van a la pastilla.
pulse Boolean false El punto respira (algo en curso).
size :xs | :sm :sm :xs para tablas densas.

Accesibilidad