Mensaje

Usa .message con un modificador de rol para mostrar el resultado de una acción o un aviso importante.

Variantes

Tema

HTML
React

<div class="message">Mensaje neutro.</div>
<div class="message message--primary">Mensaje primary.</div>
<div class="message message--success">Correo enviado correctamente.</div>
<div class="message message--danger">No pudimos enviar tu mensaje. Inténtalo nuevamente.</div>
<div class="message message--warning">Tu sesión vence en 5 minutos.</div>
<div class="message message--info">Responderemos dentro de 24 horas hábiles.</div>

export default function MensajeVariantes() {
  return (
    <>
      <div className="message">Mensaje neutro.</div>
      <div className="message message--primary">Mensaje primary.</div>
      <div className="message message--success">Correo enviado correctamente.</div>
      <div className="message message--danger">No pudimos enviar tu mensaje. Inténtalo nuevamente.</div>
      <div className="message message--warning">Tu sesión vence en 5 minutos.</div>
      <div className="message message--info">Responderemos dentro de 24 horas hábiles.</div>
    </>
  );
}

Con título

message__title destaca la primera línea. Los enlaces toman el color del mensaje.

Tema

HTML
React

<div class="message message--info">
  <strong class="message__title">Mantención programada</strong>
  <p>El sitio no estará disponible el sábado entre las 02:00 y las 04:00. <a href="#">Más información</a></p>
</div>

export default function MensajeTitulo() {
  return (
    <div className="message message--info">
      <strong className="message__title">Mantención programada</strong>
      <p>El sitio no estará disponible el sábado entre las 02:00 y las 04:00. <a href="#">Más información</a></p>
    </div>
  );
}

Con ícono

Agrega message--icon, el ícono con message__icon y el texto dentro de message__content.

Tema

HTML
React

<div class="message message--success message--icon">
  <svg class="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></svg>
  <div class="message__content">
    <strong class="message__title">Listo</strong>
    <p>Tu mensaje fue enviado. Te responderemos pronto.</p>
  </div>
</div>
<div class="message message--danger message--icon">
  <svg class="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m15 9-6 6M9 9l6 6" /></svg>
  <div class="message__content">Revisa los campos marcados antes de enviar.</div>
</div>

export default function MensajeIcono() {
  return (
    <>
      <div className="message message--success message--icon">
        <svg className="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></svg>
        <div className="message__content">
          <strong className="message__title">Listo</strong>
          <p>Tu mensaje fue enviado. Te responderemos pronto.</p>
        </div>
      </div>
      <div className="message message--danger message--icon">
        <svg className="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m15 9-6 6M9 9l6 6" /></svg>
        <div className="message__content">Revisa los campos marcados antes de enviar.</div>
      </div>
    </>
  );
}

Cerrar

Agrega message--dismissible y, al final, un botón message__close con data-ds-dismiss="message". La X se dibuja con CSS y toma el color del mensaje. Necesita ds-uikit.js.

Tema

HTML
React

<div class="message message--info message--dismissible">
  Hay una nueva versión disponible.
  <button type="button" class="message__close" data-ds-dismiss="message" aria-label="Cerrar"></button>
</div>
<div class="message message--success message--icon message--dismissible">
  <svg class="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></svg>
  <div class="message__content">
    <strong class="message__title">Listo</strong>
    <p>Guardamos tus cambios.</p>
  </div>
  <button type="button" class="message__close" data-ds-dismiss="message" aria-label="Cerrar"></button>
</div>

export default function MensajeCerrar() {
  return (
    <>
      <div className="message message--info message--dismissible">
        Hay una nueva versión disponible.
        <button type="button" className="message__close" data-ds-dismiss="message" aria-label="Cerrar" />
      </div>
      <div className="message message--success message--icon message--dismissible">
        <svg className="message__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9" /><path d="m8 12 3 3 5-6" /></svg>
        <div className="message__content">
          <strong className="message__title">Listo</strong>
          <p>Guardamos tus cambios.</p>
        </div>
        <button type="button" className="message__close" data-ds-dismiss="message" aria-label="Cerrar" />
      </div>
    </>
  );
}

Mensajes que aparecen después de una acción

Cuando el mensaje se muestra como respuesta (por ejemplo, al enviar un formulario), agrega un rol para que los lectores de pantalla lo anuncien:

role="status" para confirmaciones: se anuncia sin interrumpir.
role="alert" para errores: se anuncia de inmediato.

El contenedor con el rol debe existir en la página antes de cambiar su texto; si se crea junto con el texto, algunos lectores no lo anuncian.

Tema

HTML
React

<!-- Éxito: se anuncia sin interrumpir -->
<div class="message message--success" role="status">Correo enviado correctamente.</div>
<!-- Error: se anuncia de inmediato -->
<div class="message message--danger" role="alert">No pudimos enviar tu mensaje.</div>

export default function MensajeDinamico() {
  return (
    <>
      {/* Éxito: se anuncia sin interrumpir */}
      <div className="message message--success" role="status">Correo enviado correctamente.</div>
      {/* Error: se anuncia de inmediato */}
      <div className="message message--danger" role="alert">No pudimos enviar tu mensaje.</div>
    </>
  );
}

JavaScript

Al hacer clic en el botón, el mensaje se desvanece y queda con el atributo hidden: no se quita del DOM, así React (o el framework que lo pintó) sigue a cargo del nodo. Para quitarlo, escucha ds:closed.

const aviso = dsUIKit.message('#aviso'); // elemento o selector
aviso.close();
aviso.open();  // lo vuelve a mostrar
aviso.isOpen;  // true o false

// Quitar del DOM los mensajes cerrados
document.addEventListener('ds:closed', (e) => {
  if (e.detail.component === 'message') e.target.remove();
});

Evento	Cuándo
`ds:close`	Antes de cerrarse. Con `preventDefault()` se cancela.
`ds:closed`	Al terminar de cerrarse.
`ds:open`	Antes de mostrarse con `open()`. Cancelable.
`ds:opened`	Al terminar de mostrarse.

Más detalles (React, eventos y carga del archivo) en JavaScript.

Accesibilidad

No dependas solo del color: el texto debe decir si es un éxito, un error o un aviso.
Los íconos van con aria-hidden="true".
El botón para cerrar lleva type="button" y aria-label="Cerrar": la X es decorativa.
Si el foco estaba en el mensaje al cerrarse, pasa al siguiente elemento enfocable de la página.
Con los colores por defecto, message--secondary (2,5:1), message--warning (2,5:1) y message--info (3,5:1) quedan bajo el contraste AA.

Clases

Clase	Uso
`message`	Base. Sin rol es neutro.
`message--{rol}`	`primary`, `secondary`, `success`, `danger`, `warning`, `info`.
`message--icon`	Distribuye ícono y contenido en fila.
`message__icon`	Ícono SVG.
`message__content`	Contenido junto al ícono.
`message__title`	Título del mensaje.
`message--dismissible`	Reserva espacio para el botón de cerrar.
`message__close`	Botón para cerrar, con `data-ds-dismiss="message"`.

Variables

Variable	Valor por defecto	Uso
`--ds-message-bg`	`color-mix(in srgb, var(--ds-color-text) 8%, var(--ds-color-surface))`	Fondo.
`--ds-message-color`	`var(--ds-color-text)`	Color del texto y de los íconos.
`--ds-message-border-color`	`transparent`	Color del borde.
`--ds-message-padding-y`	`0.75rem`	Espacio vertical interno.
`--ds-message-padding-x`	`1rem`	Espacio horizontal interno.
`--ds-message-gap`	`0.75rem`	Separación entre ícono y contenido.
`--ds-message-margin-bottom`	`var(--ds-space-2)`	Margen inferior (separa mensajes seguidos).
`--ds-message-font-size`	`var(--ds-font-size-sm)`
`--ds-message-radius`	`var(--ds-radius-md)`
`--ds-message-close-size`	`2rem`	Tamaño del botón para cerrar (message__close).
`--ds-message-transition-duration`	`var(--ds-duration-fast)`	Duración del fundido al cerrar o mostrar con JS.