Saltar al contenido

Chip

Los Chips son elementos compactos que representan una entrada, atributo o acción.

Los Chips le permiten a los usuarios introducir información, hacer selecciones, filtrar contenido, o activar acciones.

Aunque incluido como un componente individual, el uso más común será en algún tipo de entrada de formulario, por lo que parte del comportamiento demostrado aquí no se muestra en este contexto.

Chip

Ejemplos de Chips, usando un Avatar de imagen, Avatar de icono SVG, Avatar con "Letra" y (cadena de texto).

  • Los Chips con la propiedad onClick definida cambian su apariencia en el focus, el hover y el click.
  • Los Chips con la propiedad onDelete definida mostrarán un icono de eliminar, el cuál cambia de apariencia en el hover.
Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable Link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Chips con contorno

Los chips con contorno ofrecen un estilo alternativo.

Basic
Disabled
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Array de Chips

Un ejemplo de cómo renderizar múltiples Chips desde un array de valores. Eliminar un chip lo quita del array. Tened en cuenta que al no estar la propiedad onClick definida, al Chip se le puede hacer focus, pero no gana profundidad si se hace click en él o se toca.

  • Angular
  • jQuery
  • Polymer
  • React
  • Vue.js

Chip Pequeño

Puedes usar la propiedad size para definir un chip pequeño.

Default variant

Basic
M
Clickable
Natacha
Deletable
Clickable Deletable
Custom delete icon
Clickable Link
M
Primary Clickable
Primary Clickable
Deletable Primary
Deletable Secondary

Outlined variant

Basic
M
Clickable
Natacha
Deletable
Clickable deletable
Custom delete icon
Clickable link
M
Primary clickable
Primary clickable
Deletable primary
Deletable secondary

Chip Playground

Chip Component
<Chip />

Accesibilidad

If the Chip is deletable or clickable then it is a button in tab order. When the Chip is focused (e.g. when tabbing) releasing (keyup event) Backspace or Delete will call the onDelete handler while releasing Escape will blur the Chip.