CRM AutoGestion
Lucy Lavender

Lucy Lavender

UX Designer

Chips

Default Chips

Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar.

Basic Chip
MB
Clickable Chip
Natacha
Deletable Chip
Clickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link Chip
MB
Primary Clickable Chip
Primary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
Chip array

An example of rendering multiple Chips from an array of values

Angular
jQuery
Polymer
React
Vue.js
Colored Chips

You can use the color prop to define a color from theme palette.

Default
Primary
Secondary
Success
Warning
Error
Info
Default
Primary
Secondary
Success
Warning
Error
Info
Outlined Chips

Outlined chips offer an alternative style.

Basic Chip
MB
Clickable Chip
Natacha
Deletable Chip
Clickable Deletable Chip
Clickable Deletable Chip
Custom delete icon Chip
Clickable Link Chip
MB
Primary Clickable Chip
Primary Clickable Chip
Deletable Primary Chip
Deletable Secondary Chip
Deletable Secondary Chip
    © 2024 - Mira