Chips

Permiten ingresar información, realizar selecciones, filtrar contenido o desencadenar acciones.

Los chips funcionalidades clave como la visualización compacta de información, la selección y deselección rápida, la eliminación o remoción de elementos, el filtrado y etiquetado, la representación de elementos seleccionados y la representación de etiquetas o etiquetado de contenido. Los chips son versátiles y se utilizan en una variedad de situaciones donde se requiere una presentación concisa de información o la interacción con elementos seleccionables.

Estas son algunas de las características y funcionalidades de los chips:

  • Visualización: Los chips se utilizan para mostrar información de manera compacta y resumida. Pueden contener texto, iconos u otra información relevante. Los chips suelen tener un tamaño pequeño y ocupan poco espacio en la interfaz, lo que los hace ideales para mostrar información de manera concisa.

  • Interacción: Los chips a menudo se utilizan para permitir a los usuarios realizar selecciones o deselecciones rápidas. Por ejemplo, en una lista de opciones, los usuarios pueden hacer clic en los chips para seleccionar o deseleccionar una opción específica. Por otro lado los chips tambien pueden ser utilizados como botones, por ejemplo en un rastreador de progreso de un proceso iniciado por un usuario, como una solicitud de retiro, los chips se utilizan en los pasos de cada hito y el usuario puede retroceder y avanzar presionando paso 1, paso 2, etc.

  • Elementos: Los chips también pueden incluir una opción para eliminar o quitar un elemento de una lista o conjunto. Al hacer clic en un ícono o en un área específica del chip, los usuarios pueden eliminar el elemento asociado, por ejemplo los filtros aplicados en la búsqueda de una carrera.

  • Etiquetado: Los chips se utilizan frecuentemente para aplicar filtros o etiquetas a contenido o elementos. Por ejemplo, en el catálogo de carreras, los chips pueden representar categorías o atributos de las carreras que los usuarios pueden seleccionar para filtrar.

  • Accesibilidad: Los chips son compatibles con la interacción táctil y suelen tener un diseño que facilita su selección en dispositivos móviles o táctiles. Además, los chips suelen ser accesibles para usuarios con discapacidades visuales o de movilidad, ya que los navegadores y las tecnologías de asistencia pueden interpretar y comunicar su contenido.

Chip Primario sin ícono

Salud Salud

HTML

<span class="chips-primario">Salud</span>
<span class="chips-primario-disabled">Salud</span>

CSS

span.chips-primario {
align-items: center;
background: #EBF2F9;
border: 2px solid transparent;
border-radius: 16px;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
min-height: 36px;
justify-content: space-between;
line-height: normal;
mix-blend-mode: normal;
padding: 0 10px;
text-align: center;
}

span.chips-primario:hover {
background: #D7E5F4;
border: 2px solid #024588;
}

span.chips-primario:active {
background: #D7E5F4;
border: 3px solid #024588;
}

span.chips-primario-disabled {
align-items: center;
background: #F0EFEF;
border: 2px solid transparent;
border-radius: 16px;
color: #B6AFAF;
cursor: not-allowed;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
min-height: 36px;
justify-content: center;
line-height: normal;
mix-blend-mode: normal;
padding: 0px 10px;
text-align: center;
}

JS

Chip Primario con ícono

Remoto Remoto Puerto Montt Puerto Montt

HTML

<span class="chips-primario-icono">Remoto <img src="iconos/anadir_lineal-1.svg" alt="" width="32px" height="32px">
</span>
<span class="chips-primario-icono-disabled">Remoto
<img src="iconos/anadir_lineal-1.svg" alt="" width="32px" height="32px">
</span>

CSS

span.chips-primario-icono {
align-items: center;
background: #EBF2F9;
border: 2px solid transparent;
border-radius: 16px;
color: #024588;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 8px;
min-height: 36px;
justify-content: space-between;
line-height: normal;
mix-blend-mode: normal;
padding: 0px 0px 0px 10px;
text-align: center;
}

span.chips-primario-icono:hover {
background: #D7E5F4;
border: 2px solid #024588;
}

span.chips-primario-icono:active {
background: #D7E5F4;
border: 3px solid #024588;
}

span.chips-primario-icono-disabled {
align-items: center;
background: #F0EFEF;
border: 2px solid transparent;
border-radius: 16px;
color: #B6AFAF;
cursor: not-allowed;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
min-height: 36px;
justify-content: center;
line-height: normal;
mix-blend-mode: normal;
padding: 0px 0px 0px 10px;
text-align: center;
}

JS

Chip Secundario con ícono

Paso Paso

HTML

<span class="chips-secundario-icono">Paso <img src="iconos/anadir_lineal-1.svg" alt="" width="32px" height="32px">
</span>
<span class="chips-secundario-icono-disabled">Paso
<img src="iconos/anadir_lineal-1.svg" alt="" width="32px" height="32px">
</span>

CSS

span.chips-secundario-icono {
align-items: center;
background: #E3F8E3;
mix-blend-mode: normal;
border: 2px solid transparent;
border-radius: 16px;
color: #258422;
cursor: pointer;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 8px;
min-height: 36px;
justify-content: space-between;
line-height: normal;
mix-blend-mode: normal;
padding: 0px 0px 0px 10px;
text-align: center;
}

span.chips-secundario-icono:hover {
background: #D0F2CE;
border: 2px solid #258422;
}

span.chips-secundario-icono:active {
background: #D0F2CE;
border: 3px solid #258422;
}

span.chips-secundario-icono-disabled {
align-items: center;
background: #F0EFEF;
border: 2px solid transparent;
border-radius: 16px;
color: #B6AFAF;
cursor: not-allowed;
display: flex;
font-family: 'Montserrat';
font-size: 16px;
font-style: normal;
font-weight: 500;
gap: 10px;
min-height: 36px;
justify-content: center;
line-height: normal;
mix-blend-mode: normal;
padding: 0px 0px 0px 10px;
text-align: center;
}

JS

Código copiado al portapapeles