Snackbar

Revisa y prueba el componente en código

Observa los componentes y sus propiedades para adaptarlos a tus necesidades específicas.

Mensajes temporales de estado. Usa el bloque BEM .cl-snackbar del Kit Digital.

Éxito

<div class="cl-snackbar cl-snackbar--success" role="status">
  <div class="cl-snackbar__content">
    <span class="cl-snackbar__icon cl-icon" data-icon="check-circle" aria-hidden="true"></span>
    <p class="cl-snackbar__message">Cambios guardados correctamente</p>
  </div>
  <button class="cl-snackbar__action" type="button">CERRAR</button>
</div>

Error

<div class="cl-snackbar cl-snackbar--error" role="status">
  <div class="cl-snackbar__content">
    <span class="cl-snackbar__icon cl-icon" data-icon="warning" aria-hidden="true"></span>
    <p class="cl-snackbar__message">No fue posible completar la acción</p>
  </div>
  <button class="cl-snackbar__action" type="button">CERRAR</button>
</div>

Sin acción

<div class="cl-snackbar cl-snackbar--neutral" role="status">
  <div class="cl-snackbar__content">
    <span class="cl-snackbar__icon cl-icon" data-icon="class" aria-hidden="true"></span>
    <p class="cl-snackbar__message">Texto del mensaje</p>
  </div>
</div>