Saltar al contenido principal

Chips

Se utilizan para presentarle un contenido dinámico al usuario. Pueden introducir información y/o filtrar contenidos; y pueden verse en labels, tags, estados y atributos.

Chip básico​

Se representa como una caja rectangular con los extremos redondeados. El texto siempre debe ir centrado.

Variant filled
Variant outlined
pages/index.tsx
import { Chip } from '@mui/material';

<Chip label="Variant filled"/>
<Chip label="Variant outlined" variant="outlined" />

Chip con fondo de color​

Un chip puede estar representado por un color de nuestra paleta complementaria. El color elegido se usará pleno para la tipografía y al 25% de este mismo color para para el fondo de la caja.

Menta
Limón
Sandía
Melón
Mora
Sky
Uva
Lima
Dalia
Error
Grey
pages/index.tsx
import { Chip } from '@mui/material';

<Chip label="Menta" variant="menta" />
<Chip label="Limón" variant="limon" />
<Chip label="Sandía" variant="sandia" />
<Chip label="Melón" variant="melon" />
<Chip label="Mora" variant="mora" />
<Chip label="Sky" variant="sky" />
<Chip label="Uva" variant="uva" />
<Chip label="Lima" variant="lima" />
<Chip label="Dalia" variant="dalia" />
<Chip label="Error" variant="error" />
<Chip label="Grey" variant="grey" />

Chip con borde de color​

Menta
Limón
Sandía
Melón
Mora
Sky
Uva
Lima
Dalia
Error
Grey
pages/index.tsx
import { Chip } from '@mui/material';

<Chip label="Menta" variant="menta-outlined" />
<Chip label="Limón" variant="limon-outlined" />
<Chip label="Sandía" variant="sandia-outlined" />
<Chip label="Melón" variant="melon-outlined" />
<Chip label="Mora" variant="mora-outlined" />
<Chip label="Sky" variant="sky-outlined" />
<Chip label="Uva" variant="uva-outlined" />
<Chip label="Lima" variant="lima-outlined" />
<Chip label="Dalia" variant="dalia-outlined" />
<Chip label="Error" variant="error-outlined" />
<Chip label="Grey" variant="grey-outlined" />

Prueba el componente​

https://cash-on-delivery-frontend.vercel.app/

Editor en vivo
<Chip label="Chip" variant="menta" />

Resultado
Loading...