O novo mdui 2, baseado em Material Design 3 e Web Components, já foi lançado, veja a documentação do mdui 2.

Chip

Os chips podem conter informações concisas, como uma imagem ou uma string curta.

Como usar

O componente de chip é escrito em CSS puro, bastando escrever o código HTML para que ele funcione.

Leitura relacionada

Diretrizes de design do Material Design: Componentes - Chip

Estilo

Apenas texto

Exemplo

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
</div>

Com avatar

Exemplo

<div class="mdui-chip">
  <img class="mdui-chip-icon" src="avatar1.jpg"/>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Com ícone de texto

Exemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon">A</span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Com ícone

Exemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Com botão de fechar

Exemplo

<div class="mdui-chip">
  <span class="mdui-chip-title">Example Chip</span>
  <span class="mdui-chip-delete">
    <i class="mdui-icon material-icons">cancel</i>
  </span>
</div>

Cor do ícone

Exemplo

<div class="mdui-chip">
  <span class="mdui-chip-icon mdui-color-blue">
    <i class="mdui-icon material-icons">face</i>
  </span>
  <span class="mdui-chip-title">Example Chip</span>
</div>

Lista de classes CSS

Nome da classe	Descrição
`.mdui-chip`	Define um componente de chip.
`.mdui-chip-title`	Define o texto do chip.
`.mdui-chip-icon`	Define o avatar ou ícone do chip.
`.mdui-chip-delete`	Define o botão de exclusão do chip.

Card

Tooltip