Avisos

Estado: Estable

Aviso

Lo que la persona debe saber sin pedirlo: un pago rechazado, su clase confirmada, el paquete por vencer, un cambio de horario o los errores de un formulario. Capa con borde de 1px, el tono solo en el ícono y su cuadrito, acciones propias y una franja de ancho completo para los avisos de página. Al descartarlo se colapsa con resorte y lo de abajo sube sin saltos.

Mis clases

Esta semana

Clase confirmada

Vinyasa Flow, mañana a las 7:00 con Ana. Te mandamos el recordatorio por correo.

app/views/… (la demo de arriba)

<div class="@container w-full max-w-xl">
  <div class="grid gap-3">
    <%# Aviso de página: la franja va de orilla a orilla, debajo del navbar. %>
    <div class="overflow-hidden rounded-xl border border-border bg-background">
      <%= render Ui::AlertComponent.new(tone: :warning, layout: :banner, title: "Tu paquete vence en 3 días.", dismissible: true, class: "border-t-0") do |alert| %>
        <% alert.with_actions do %>
          <%= render Ui::ButtonComponent.new(size: :sm, href: "#alert-renovar") do %>Renovar paquete<% end %>
        <% end %>
        Te quedan 2 de 10 créditos.
      <% end %>
      <div class="flex items-center justify-between gap-3 px-4 py-3 sm:px-6">
        <p class="text-sm font-semibold tracking-tight text-foreground">Mis clases</p>
        <p class="eui-label">Esta semana</p>
      </div>
    </div>

    <%= render Ui::AlertComponent.new(tone: :danger, title: "No pudimos cobrar tu paquete") do |alert| %>
      <% alert.with_actions do %>
        <%= render Ui::ButtonComponent.new(size: :sm, href: "#alert-tarjeta") do %>Usar otra tarjeta<% end %>
        <%= render Ui::ButtonComponent.new(variant: :secondary, size: :sm, href: "#alert-detalle") do %>Ver detalle<% end %>
      <% end %>
      Tu banco rechazó la tarjeta terminada en 4242. No se te hizo ningún cargo.
    <% end %>

    <%= render Ui::AlertComponent.new(tone: :success, title: "Clase confirmada", dismissible: true) do %>
      Vinyasa Flow, mañana a las 7:00 con Ana. Te mandamos el recordatorio por correo.
    <% end %>

    <%# En una tarjeta angosta se queda con los primeros tres. %>
    <div class="hidden @md:contents">
      <%= render Ui::AlertComponent.new(tone: :info, title: "Cambio de horario", icon: :calendar) do %>
        Desde el lunes 19 de octubre, Reformer de la tarde pasa de 19:00 a 19:30.
      <% end %>

      <%# La lista de errores de un formulario (como devise/shared/_error_messages). %>
      <%= render Ui::AlertComponent.new(tone: :danger, title: "3 errores impidieron guardar la clase:") do %>
        <ul>
          <li>Capacidad debe ser mayor que 0</li>
          <li>Hora de inicio no puede estar en blanco</li>
          <li>Maestra no puede estar en blanco</li>
        </ul>
      <% end %>

      <%= render Ui::AlertComponent.new(title: "Recuerda traer tu tapete") do %>
        Esta semana estamos renovando el material del estudio.
      <% end %>
    </div>
  </div>
</div>

Qué hace

  • Misma API que el Alert anterior (title, variant, dismissible); las vistas de devise lo siguen usando igual.
  • El tono se acerca al foreground para que el ícono pase 3:1 en todas las personalidades (también el ámbar en claro).
  • Al descartar, alto, relleno y márgenes bajan con el resorte smooth y la opacidad se va antes; con movimiento reducido se quita de inmediato.
  • La franja (:banner) acomoda texto y acciones en una línea y en el teléfono pasa las acciones abajo.

Props

Nombre Tipo Default Descripción
title String — La frase principal. Sin título, el contenido es el mensaje (en foreground).
tone :neutral | :success | :warning | :danger | :info :neutral El tono: ícono y su cuadrito. :danger y :warning son role="alert"; el resto role="status". variant: (:default, :destructive…) es su nombre anterior y sigue sirviendo.
dismissible Boolean false Muestra la ✕; al descartar se colapsa (alto + opacidad) y se quita. Dispara alert:dismissed.
icon Symbol | false según el tono Otro ícono (:bell, :card, :calendar, :clock, :package, :sparkles…) o false para quitarlo.
layout :card | :banner :card :banner es la franja de ancho completo para avisos de página.
dismiss_label String "Descartar aviso" Nombre accesible de la ✕.
with_actions slot — Botones del aviso (Renovar paquete, Usar otra tarjeta).
with_icon slot — Un ícono propio (SVG) en lugar del del tono.
content bloque — La descripción (texto o una lista <ul> de errores).

Accesibilidad