Chip

Chips são elementos compactos que representam uma entrada, atributo ou ação.

Chips permitirão que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos.

Embora incluído aqui como um componente independente, o uso mais comum será em alguma forma de entrada, portanto, alguns dos comportamentos demonstrados aqui não são mostrados considerando um contexto.

Chip básico

O componente Chip oferece suporte a estilos contornados e preenchidos.

Chip Filled

Chip Outlined

<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />
<Chip label="Chip Filled" />
<Chip label="Chip Outlined" variant="outlined" />

Press Enter to start editing

Ações do Chip

Você pode usar as seguintes ações.

Chips com a propriedade onClick definida, mudará a aparência com foco, ao passar por cima e com clique.
Chips com a propriedade onDelete definida irá exibir um ícone de remoção, no qual modificará a aparência ao passar por cima.

Clicável

⚠️ Missing demo `ClickeableChips.js` ⚠️

Deletável

⚠️ Missing demo `DeleteableChips.js` ⚠️

Clicável e deletável

Clickable Deletable

<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  onClick={handleClick}
  onDelete={handleDelete}
/>
<Chip
  label="Clickable Deletable"
  variant="outlined"
  onClick={handleClick}
  onDelete={handleDelete}
/>

Press Enter to start editing

Link clicável

⚠️ Missing demo `ClickeableLinkChips.js` ⚠️

Ícone de exclusão personalizado

Custom delete icon

<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DoneIcon />}
/>
<Chip
  label="Custom delete icon"
  onClick={handleClick}
  onDelete={handleDelete}
  deleteIcon={<DeleteIcon />}
  variant="outlined"
/>

Press Enter to start editing

Chip adornments

You can add ornaments to the beginning of the component.

Use the avatar prop to add an avatar or use the icon prop to add an icon.

Avatar chip

Avatar

<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>
<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
<Chip
  avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
  label="Avatar"
  variant="outlined"
/>

Press Enter to start editing

Icon chip

With Icon

<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />
<Chip icon={<FaceIcon />} label="With Icon" />
<Chip icon={<FaceIcon />} label="With Icon" variant="outlined" />

Press Enter to start editing

Color chip

You can use the color prop to define a primary or secondary color.

primary

success

primary

success

<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" />
  <Chip label="success" color="success" />
</Stack>
<Stack direction="row" spacing={1}>
  <Chip label="primary" color="primary" variant="outlined" />
  <Chip label="success" color="success" variant="outlined" />
</Stack>

Press Enter to start editing

Sizes chip

Você pode usar a propriedade size para definir um Chip pequeno.

Small

<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />
<Chip label="Small" size="small" />
<Chip label="Small" size="small" variant="outlined" />

Press Enter to start editing

Matriz de Chip (Array)

An example of rendering multiple chips from an array of values. Deletando um chip irá remove-lo da matriz. Note that since no onClick prop is defined, the Chip can be focused, but does not gain depth while clicked or touched.

Angular
jQuery
Polymer
React
Vue.js

Chip playground

Acessibilidade

Se o Chip é deletável ou clicável, então é como um botão na ordem da tabulação. Quando o Chip está focado (ex. quando tabulando) pressionando (evento keyup) Backspace ou Delete irá chamar o evento manipulador onDelete, enquanto liberando com a tecla Escape irá tirar o foco do Chip.

API

<Chip />