Badge

Usage

<Badge>Badge</Badge>

Variants

Estilos o variaciones que se pueden aplicar a los badges para representar diferentes estados, categorías o tipos de información en una página web. Estas variantes se logran mediante la aplicación de diferentes colores, estilos de fuente, tamaños o elementos visuales a los badges.

<Badge variant='primary'>Primary</Badge>
<Badge variant='secondary'>Secondary</Badge>
<Badge variant='success'>Success</Badge>
<Badge variant='error'>Error</Badge>
<Badge variant='dark'>Dark</Badge>

Light variant

<Badge variant='light'>Light</Badge>

Sizes

La propiedad size en los badges se utiliza para ajustar el tamaño de los badges en una página web. Permite controlar visualmente el aspecto y la legibilidad de los badges según tus necesidades de diseño. Los tamaño disponibles son: xs, sm, md y lg.

<Badge size='xs'>xs</Badge>
<Badge size='sm'>sm</Badge>
<Badge size='md'>md</Badge>
<Badge size='lg'>lg</Badge>

Pill

Esta opción permite convertir los badges en elementos circulares o redondeados. Para activar esta opción, se debe utilizar la propiedad pill.

<Badge pill size='xs'>Badge</Badge>
<Badge pill size='sm'>Badge</Badge>
<Badge pill size='md'>Badge</Badge>
<Badge pill size='lg'>Badge</Badge>

<Badge pill size='xs'>1</Badge>
<Badge pill size='sm'>2</Badge>
<Badge pill size='md'>3</Badge>
<Badge pill size='lg'>4</Badge>

Custom badges

Para tener estos badges customizados, se debe utilizar la prop inline y agregar las clases de tailwind necesarias. Esta props permite eliminar todos los estilos predeterminados de los badges.

<Badge inline class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-pink-500 text-white">Custom badge</Badge>
<Badge inline class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Custom badge</Badge>
<Badge inline class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">8</Badge>

Notification

<button class='relative flex items-center justify-center text-sm font-medium h-9 rounded-md px-6 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700'>
  <span>Notifications</span>
  <Badge pill size='xs' class='absolute -top-1 right-0'>2</Badge>
</button>

<button class='relative flex items-center justify-center text-sm font-medium h-9 rounded-md px-6 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700'>
  <span>Messages</span>
  <Badge pill size='xs' class='absolute -top-1 -right-1'>10</Badge>
</button>

<Button>
  <span>Notifications</span>
  <Badge variant='light' pill size='xs'>2</Badge>
</Button>

<Button variant='secondary'>
  <span>Emails</span>
  <Badge variant='dark' pill size='xs'>8</Badge>
</Button>

<button class='relative gap-2 flex items-center justify-center text-sm font-medium h-10 rounded-md px-6 bg-gray-200 hover:bg-gray-300 dark:bg-gray-800 dark:hover:bg-gray-700'>
  <span>Messages</span>
  <Badge pill size='xs'>12</Badge>
</button>

Props

Prop	Type	default	Description
variant	String	primary	Variante del badge. Las variantes disponibles son: primary, secondary, success, error, dark y light.
size	String	md	Tamaño del badge. Los tamaños disponibles son: xs, sm, md y lg.
pill	Boolean	false	Si el badge debe ser redondeado.