Badge

Elemento visual pequeño usado para mostrar estados, categorías o alertas de forma rápida y clara. Ideal para resaltar información como "Nuevo", "Error" o "Beta".

Base

DEFAULT

<span class="badge">DEFAULT</span>

Colores

Configura el color del badge usando la clase is-{color}

info

Para ver los colores disponibles, revisa la sección de Colores.

PrimaryInfoSuccessWarning

<div class="is-flex is-gap-3">
  <span class="badge is-primary">Primary</span>
  <span class="badge is-info">Info</span>
  <span class="badge is-success">Success</span>
  <span class="badge is-warning">Warning</span>
</div>

Tonal

Agrega un fondo tonal al badge usando la clase is-tonal.

tip

Puedes combinarlo con colores, por ejemplo: is-tonal is-primary, is-tonal is-warning, etc.

Preview

PrimaryInfoSuccessWarningError

Code

<div class="is-flex is-gap-3 px-3 py-4 is-bg-white is-rounded-2">
  <span class="badge is-primary is-tonal">Primary</span>
  <span class="badge is-info is-tonal">Info</span>
  <span class="badge is-success is-tonal">Success</span>
  <span class="badge is-warning is-tonal">Warning</span>
  <span class="badge is-error is-tonal">Error</span>
</div>

Outlined

Puedes configurar el badge con bordes y fondo blanco usando la clase is-outlined

Preview

PrimaryInfoSuccessWarningError

Code

<div class="is-flex is-gap-3">
  <span class="badge is-primary is-outlined">Primary</span>
  <span class="badge is-info is-outlined">Info</span>
  <span class="badge is-success is-outlined">Success</span>
  <span class="badge is-warning is-outlined">Warning</span>
  <span class="badge is-error is-outlined">Error</span>
</div>

Íconos

Puedes agregar íconos al botón usando el componente <iconify-icon>.

tip

Para más información sobre cómo usar íconos, revisa la sección de Iconos.

Preview

Primary Info Error

Code

<div class="is-flex is-gap-3">
  <span class="badge is-primary is-outlined">
    <iconify-icon class="icon" icon="mdi:check"></iconify-icon>
    <span>Primary</span>
  </span>

  <span class="badge is-info">
    <span>Info</span>
    <iconify-icon class="icon" icon="mdi:info"></iconify-icon>
  </span>

  <span class="badge is-error is-tonal">
    <iconify-icon class="icon" icon="mdi:warning"></iconify-icon>
    <span>Error</span>
  </span>

  <span class="badge is-primary">
    <iconify-icon class="icon" icon="mdi:home"></iconify-icon>
  </span>
</div>

Tamaños

Puedes configurar el tamaño del badge usando las clases is-md, is-lg

Preview

PrimaryInfo

Code

<div class="is-flex is-gap-3 is-align-items-flex-start">
  <span class="badge is-primary is-md">Primary</span>
  <span class="badge is-info is-lg">Info</span>
</div>