Confirmación.

<section class="ui-sample ui-feedback" role="status" data-severity="success"><span class="badge badge--ok">Listo</span> <strong>Documento guardado</strong><p>La versión 4 quedó registrada con su código de verificación.</p><a class="btn btn--quiet" href="#detalle">Ver detalle</a></section>

<section class="ui-sample ui-feedback border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" role="status" data-severity="success"><span class="badge badge--ok">Listo</span> <strong>Documento guardado</strong><p>La versión 4 quedó registrada con su código de verificación.</p><a class="btn btn--quiet underline underline-offset-4" href="#detalle">Ver detalle</a></section>

export interface AlertSuccessProps {
  /** Título de la confirmación; vacío omite el título. */
  title?: string;
  /** Qué quedó registrado; vacío omite el párrafo. */
  description?: string;
  /** Texto del enlace al detalle; vacío oculta el enlace. */
  linkLabel?: string;
  /** Destino del enlace al detalle; vacío oculta el enlace. */
  href?: string;
  /** Texto de la insignia que dice la gravedad antes del título («Listo»); vacío la oculta. */
  severityLabel?: string;
  className?: string;
}

/**
 * Confirmación dentro de la página, para indicar que una acción terminó bien y qué quedó registrado.
 *
 * Usa `role="status"`: el lector de pantalla la anuncia sin interrumpir. Para una confirmación temporal, usa `Toast`. La insignia de `severityLabel` dice la gravedad en texto, sin depender del color.
 *
 * @example <AlertSuccess title="Documento guardado" description="La versión 4 quedó registrada con su código de verificación." href="/documentos/4" />
 * @example <AlertSuccess title="Pago recibido" description="La boleta 1.204 quedó emitida." linkLabel="Descargar boleta" href="/boletas/1204" />
 */
export function AlertSuccess({
  title = "Documento guardado",
  description = "La versión 4 quedó registrada con su código de verificación.",
  linkLabel = "Ver detalle",
  href = "#detalle",
  severityLabel = "Listo",
  className,
}: AlertSuccessProps) {
  return (
    <section className={["ui-feedback", className].filter(Boolean).join(" ")} role="status" data-severity="success">
      {severityLabel ? <span className="badge badge--ok">{severityLabel}</span> : null}
      {severityLabel && title ? " " : null}
      {title ? <strong>{title}</strong> : null}
      {description ? <p>{description}</p> : null}
      {linkLabel && href ? <a className="btn btn--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}