Etiqueta

Etiqueta ligera. Color semántico mediante type, variantes round/hit y cierre opcional.

Etiqueta

<template>
  <div class="demo-col">
    <div class="demo-row">
      <LhTag>Predeterminada</LhTag>
      <LhTag type="primary">Principal</LhTag>
      <LhTag type="success">Éxito</LhTag>
      <LhTag type="warning">Advertencia</LhTag>
      <LhTag type="danger">Peligro</LhTag>
      <LhTag type="info">Información</LhTag>
    </div>
    <div class="demo-row">
      <LhTag size="small">Pequeña</LhTag>
      <LhTag size="medium">Tamaño predeterminado</LhTag>
      <LhTag size="large">Grande</LhTag>
      <LhTag type="primary" round>Redondeada</LhTag>
      <LhTag type="primary" hit>Borde (hit)</LhTag>
    </div>
    <div class="demo-row">
      <LhTag type="primary" closable @close="closed = true">Cerrable</LhTag>
      <LhTag v-if="!closed" type="info" round>Oculta tras cerrarse</LhTag>
      <LhTag type="warning" disabled>Desactivada</LhTag>
    </div>
  </div>
</template>

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

Props

Prop	Descripción	Tipo	Predeterminado
type	Color semántico	'default' \| 'primary' \| 'success' \| 'warning' \| 'danger' \| 'info'	'default'
size	Tamaño	'small' \| 'medium' \| 'large'	'medium'
closable	Muestra el botón de cierre (el aria-label procede del paquete de idioma)	boolean	false
disabled	Desactivada (intercepta el botón de cierre)	boolean	false
round / hit	Esquinas redondeadas / énfasis de borde	boolean	false
onClose	Callback de cierre (coexiste con el evento close)	(e: Event) => void	—
sx	Prop abreviada de maquetación	—	—

Events

Evento	Descripción	Parámetros del callback
click	Se dispara al pulsar	(e: MouseEvent)
close	Se dispara al pulsar el botón de cierre (coexiste con el prop onClose)	(e: Event)