Skip to main content

Badge

Estilos por defecto​

Estilos por defecto
BadgePrimarySecondaryAlternative

Redondeados​

Redondeados

Agrega la clase .rounded-full de Tailwind para aumentar el border-radius de los badges.

BadgePrimarySecondaryAlternative

Outline​

Outline
BadgePrimarySecondaryAlternative

Ghost​

Ghost
BadgePrimarySecondaryAlternative

Colores personalizados​

Colores personalizados
SuccessWarningDangerInfo

Dots​

Dots

El badge dot tiene posición absoluta por lo que su contenedor deberá tener declarada una posición también, ya sea absoluta o relativa.

Top left
Top right
Bottom left
Bottom right

Ejemplos de uso​

Avatar badge​

user
83
<div class="relative w-14">
  <div class="eolo-avatar eolo-avatar-squircle">
    <img src="..." alt="..." />
  </div>
  <span class="eolo-badge bg-red-500 border-red-500 top-auto -right-1 -bottom-1 absolute rounded-full">83</span>
</div>

Avatar con dot badge​

user
<div class="eolo-avatar w-14 rounded-full">
  <img src="..." alt="..." />
  <span class="eolo-dot-badge top-auto bottom-0.5 right-0.5 animate-pulse" />
</div>

Acción requerida​

<div class="inline-flex relative">
  <button class="eolo-btn bg-primary border-primary text-white dark:bg-primary dark:border-primary dark:text-white">
    Action required
  </button>
  <span class="eolo-dot-badge animate-pulse" />
</div>

Mensaje​

Unread emails+99
<div class="space-x-2">
  <span class="text-red-600 font-medium">Unread emails</span>
  <span class="eolo-badge bg-red-600 border-red-600 rounded-full animate-pulse">+99</span>
</div>