Version 2.0

Badge

Documentación y ejemplos para insignias, nuestro pequeño componente para el uso de conteo, etiquetado e informativo.

Import

Example code
import Badge from 'components/@ui/badge'

Usage

Ejemplo básico sobre la implementacion del component Badge.

Example code
<Badge>Default badge</Badge>

Colors

Ejemplo del uso de los Badges en sus diferentes colores, muy importante a la hora de determinar el tipo de información y etiquetado dependiendo del contexto en el que nos encontramos.

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Badge color='primary'>Primary</Badge>
  <Badge color='secondary'>Secondary</Badge>
</div>

Sizes

Representación de los diferentes tamaños que están disponibles, para ello utilizamos la prop size con los valores siguientes disponibles xs, sm y md.

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Badge size='xs' color='primary'>Extra small</Badge>
  <Badge size='sm' color='primary'>Small</Badge>
  <Badge size='md' color='primary'>Medium</Badge>
  <Badge size='lg' color='primary'>Large</Badge>
</div>

Example code
<div className='flex items-center flex-wrap gap-2'>
  <Badge size='xs' color='primary'>1</Badge>
  <Badge size='sm' color='primary'>2</Badge>
  <Badge size='md' color='primary'>3</Badge>
  <Badge size='lg' color='primary'>4</Badge>
</div>