Insignia

Marca numérica o de estado en la esquina de un icono o botón. Admite colores por tipo, truncado con max, punto rojo, visibilidad del valor cero y desplazamiento de posición.

Insignia

<template>
  <div class="demo-col">
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge :value="12" type="primary">
        <LhButton>Mensajes sin leer</LhButton>
      </LhBadge>
      <LhBadge :value="999" :max="99">
        <LhButton>Trunca al superar max</LhButton>
      </LhBadge>
      <LhBadge is-dot>
        <LhButton>Modo punto rojo</LhButton>
      </LhBadge>
      <LhBadge :value="0" :show-zero="true">
        <LhButton>showZero</LhButton>
      </LhBadge>
      <LhBadge :value="0">
        <LhButton>El valor cero se oculta por defecto</LhButton>
      </LhBadge>
      <LhBadge :value="3" type="danger" size="small">
        <LhButton>Tamaño small</LhButton>
      </LhBadge>
    </div>
    <p class="demo-note">offset ajusta la posición / hidden oculta / content personaliza el texto</p>
    <div class="demo-row" style="gap: 40px; flex-wrap: wrap">
      <LhBadge content="Popular" type="danger" :offset="[6, 4]">
        <LhButton>Desplazamiento offset</LhButton>
      </LhBadge>
      <LhBadge :value="5" :hidden="hidden">
        <LhButton>Interruptor hidden</LhButton>
      </LhBadge>
      <LhButton size="small" @click="hidden = !hidden">{{ hidden ? 'Mostrar insignia' : 'Ocultar insignia' }}</LhButton>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    hidden: false,
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
type	Color por tipo	'primary' \| 'success' \| 'warning' \| 'danger'	'danger'
value	Valor numérico de la insignia (si supera max, se trunca a max+)	string \| number	—
size	Tamaño	'small' \| 'default' \| 'large'	'default'
max	Valor máximo	number	—
isDot	Modo punto rojo (ignora value)	boolean	false
hidden	Oculta la insignia	boolean	false
offset	Desplazamiento respecto a la posición predeterminada [x, y]	[number, number]	—
showZero	Si se sigue mostrando cuando value es 0	boolean	false
content	Texto personalizado (prevalece sobre value)	string	—
sx	Propiedades de layout abreviadas	—	—

Slots

Slot por defecto: elemento anfitrión donde se monta la insignia.