Agave Chips

Chips allow users to enter information, make selections, filter content, or trigger actions.

Usage

Basic Chip

Variant filled

Variant outlined

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

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

Filled common color chip

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" />

Outlined common color chip

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" />

Live editor

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

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

Props

Props

Name	Type	Default	Description
variant	filled | outlined | menta | limon | sandia | melon | mora | sky | uva | lima | dalia | error | grey | menta-outlined | limon-outlined | sandia-outlined | melon-outlined | mora-outlined | sky-outlined | uva-outlined | lima-outlined | dalia-outlined | error-outlined | grey-outlined | 'string'	filled	The variant to use.
			See material-ui API documentation for the React Chip component.