Snackbar
Ofrecen breves mensajes sobre los procesos de las aplicaciones en la parte inferior de la pantalla.
La finalidad de un snackbar es mostrar notificaciones breves y temporales en la parte
inferior de la pantalla. Proporciona feedback, confirmación y notificaciones de estado,
con una interacción limitada y un tiempo de visualización breve. El snackbar mejora la
experiencia del usuario al proporcionar información importante de manera discreta y no
intrusiva.
Los snackbar pueden ser muy simples con texto informativo, y a medida que la tarea es
más compleja, se suman iconos, acciones cortas y acciones largas.
Estos son algunos aspectos importantes sobre la funcionalidad de los snackbar:
- Notificación: El snackbar se utiliza para mostrar mensajes cortos
y concisos, generalmente con una duración limitada, para informar al usuario sobre
eventos o acciones importantes que acaban de ocurrir que el mismo usuario realizó.
Además el snackbar puede mostrar notificaciones relacionadas con el estado de la aplicación o del sistema. Puede alertar al usuario sobre eventos como errores, advertencias o actualizaciones disponibles. - Ubicación: El snackbar se coloca en la parte inferior de la pantalla para no interrumpir la experiencia de uso del usuario. Su ubicación estratégica y discreta permite que las notificaciones se muestren sin obstruir el contenido principal de la interfaz.
- Feedback: El snackbar puede utilizarse para proporcionar feedback visual y confirmación al usuario después de realizar una acción. Por ejemplo, después de enviar un formulario, el snackbar puede mostrar un mensaje de éxito o un breve resumen de la acción realizada.
- Interacción: Aunque el snackbar puede contener botones o acciones, generalmente se limita a opciones de interacción simples y rápidas. Por lo general, se proporcionan acciones como "Deshacer" o "Cerrar" para permitir al usuario revertir una acción o descartar el snackbar.
- Tiempo: El snackbar se muestra durante un tiempo limitado para no interferir en exceso con la experiencia del usuario. Por lo general, desaparece automáticamente después de unos segundos, pero también puede permitir que el usuario lo cierre manualmente si es necesario.
- Formatos: Este sistema de diseño posee snackbar con diferentes componentes: sólo con texto, con icono, con botón de acción y todo lo anterior junto, además de formatos pequeños y extendidos. La decisión de cuál utilizar dependerá de la función que cumpla el snackbar con la acción realizada.
Snackbar
HTML
<div class="snackbar" id="snackbar1"> Snackbar horizontal </div>
CSS
div.snackbar {
align-items: center;
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar horizontal con icono
HTML
<div class="snackbar" id="snackbar1">
<img width="32" height="32" src="iconos/informacion.svg">
Snackbar horizontal
</div>
CSS
div.snackbar {
align-items: center;
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar horizontal con interacción
HTML
<div class="snackbar-link" id="snackbar1">
Snackbar de una línea con interacción.
<a href="">Acción</a>
</div>
CSS
div.snackbar-link {
align-items: center;
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
justify-content: space-between;
line-height: 26px;
max-width: 520px;
min-width: 280px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-link span,
div.snackbar-vertical span {
align-items: center;
display: flex;
gap: 10px;
}
div.snackbar-link a {
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar horizontal con icono y acción
HTML
<div class="snackbar-link"> <span> <img width="32" height="32" src="iconos/informacion.svg"><br> Snackbar horizontal con icono y acción </span> <a href="">Acción</a> </div>
CSS
div.snackbar-link {
align-items: center;
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 10px;
justify-content: space-between;
line-height: 26px;
max-width: 520px;
min-width: 280px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-link span,
div.snackbar-vertical span {
align-items: center;
display: flex;
gap: 10px;
}
div.snackbar-link a {
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar vertical sin icono y con acción extensa
HTML
<div class="snackbar-vertical"> <span> <img width="32" height="32" src="iconos/informacion.svg"><br> Snackbar horizontal con icono y acción </span> <a href="">Acción</a> </div>
CSS
div.snackbar-vertical {
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 40px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-vertical h4 {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
div.snackbar-vertical p {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
}
div.snackbar-vertical a {
align-self: flex-end;
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
div.snackbar-link a:hover,
div.snackbar-vertical a:hover {
color: #BFD6ED;
}
div.snackbar-link a:active,
div.snackbar-vertical a:active {
color: #EBF2F9;
}
div.snackbar-vertical .fila {
display: flex;
gap: 10px;
}
div.snackbar-vertical .columna {
display: flex;
flex-direction: column;
gap: 40px;
}
div.snackbar-vertical .columna-small {
display: flex;
flex-direction: column;
gap: 10px;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar vertical con icono y con acción extensa
HTML
<div class="snackbar-vertical"> <span> <img width="32" height="32" src="iconos/informacion.svg"><br> Snackbar horizontal con icono y acción </span> <a href="">Acción</a> </div>
CSS
div.snackbar-vertical {
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 40px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-vertical h4 {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
div.snackbar-vertical p {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
}
div.snackbar-vertical a {
align-self: flex-end;
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
div.snackbar-link a:hover,
div.snackbar-vertical a:hover {
color: #BFD6ED;
}
div.snackbar-link a:active,
div.snackbar-vertical a:active {
color: #EBF2F9;
}
div.snackbar-vertical .fila {
display: flex;
gap: 10px;
}
div.snackbar-vertical .columna {
display: flex;
flex-direction: column;
gap: 40px;
}
div.snackbar-vertical .columna-small {
display: flex;
flex-direction: column;
gap: 10px;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar vertical con icono y con acción extensa
HTML
<div class="snackbar-vertical"> <div class="columna-small"> <h4>Título del Snacbar</h4> <p>Snackbar vertical sin icono, título y con acción extensa</p> </div> <a href="">Acción Extensa</a> </div>
CSS
div.snackbar-vertical {
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 40px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-vertical h4 {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
div.snackbar-vertical p {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
}
div.snackbar-vertical a {
align-self: flex-end;
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
div.snackbar-link a:hover,
div.snackbar-vertical a:hover {
color: #BFD6ED;
}
div.snackbar-link a:active,
div.snackbar-vertical a:active {
color: #EBF2F9;
}
div.snackbar-vertical .fila {
display: flex;
gap: 10px;
}
div.snackbar-vertical .columna {
display: flex;
flex-direction: column;
gap: 40px;
}
div.snackbar-vertical .columna-small {
display: flex;
flex-direction: column;
gap: 10px;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
Snackbar vertical con icono, título y con acción extensa
HTML
<div class="snackbar-vertical"> <div class="columna-small"> <h4>Título del Snacbar</h4> <p>Snackbar vertical sin icono, título y con acción extensa</p> </div> <a href="">Acción Extensa</a> </div>
CSS
div.snackbar-vertical {
background: #002846;
border-radius: 10px;
box-shadow: 0px 3px 10px rgba(16, 15, 15, 0.4);
color: #EBF2F9;
display: flex;
flex-direction: column;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
gap: 40px;
line-height: 26px;
max-width: 550px;
min-width: 320px;
mix-blend-mode: normal;
padding: 21px 20px;
width: 100%;
}
div.snackbar-vertical h4 {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 28px;
}
div.snackbar-vertical p {
color: #EBF2F9;
font-family: 'Montserrat';
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 26px;
}
div.snackbar-vertical a {
align-self: flex-end;
color: #A3C5E6;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 600;
font-weight: 600;
gap: 10px;
line-height: 26px;
mix-blend-mode: normal;
mix-blend-mode: normal;
text-align: center;
text-decoration-line: underline;
}
div.snackbar-link a:hover,
div.snackbar-vertical a:hover {
color: #BFD6ED;
}
div.snackbar-link a:active,
div.snackbar-vertical a:active {
color: #EBF2F9;
}
div.snackbar-vertical .fila {
display: flex;
gap: 10px;
}
div.snackbar-vertical .columna {
display: flex;
flex-direction: column;
gap: 40px;
}
div.snackbar-vertical .columna-small {
display: flex;
flex-direction: column;
gap: 10px;
}
#snackbar1 {
position: fixed;
bottom: 30px;
left: 50%;
transform: translate(-50%, 500px);
transition: transform 0.3s ease-in-out;
}
.snackbar.show,
.snackbar-link.show,
.snackbar-vertical.show {
transform: translate(-50%, 0) !important;
}
JS
const botonCallSnackbar = document.getElementById("botonCallSnackbar");
const snackbar1 = document.getElementById("snackbar1");
botonCallSnackbar.addEventListener("click", function (event) {
event.preventDefault();
snackbar1.classList.add("show");
setTimeout(function () {
if (snackbar1.classList.contains('show'))
snackbarEjemplo1.classList.remove("show");
}, 3000);
});
