Badge
Uso
El componente SBadge muestra una etiqueta compacta en línea. Usa el slot por defecto para establecer el contenido del badge.
Colores
Usa la prop color para cambiar el color del badge.
Tamaños
Usa la prop size para cambiar el tamaño del badge.
Outline
Establece outline en true para mostrar un estilo con borde y fondo más claro.
Pill
Establece pill en true para usar bordes completamente redondeados.
Dot
Establece dot en true para mostrar un punto indicador de color antes del contenido.
Removable
Establece removable en true para mostrar un botón de eliminar. El componente emite un evento removed al hacer clic. Usa 'stopPropagation' para también detener la propagación del evento.
Slot Tag
Usa el slot tag para mostrar una sección de etiqueta resaltada dentro del badge.
Reverse
Establece reverse en true para invertir el orden del tag y el contenido.
Combinado
Combina múltiples props para diferentes estilos.
<template>
<SBadge color="red" :pill="true" :dot="true" :outline="true">Crítico</SBadge>
</template>
Props
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
color | 'gray' | 'white' | 'primary' | 'red' | 'blue' | 'green' | 'yellow' | 'indigo' | 'purple' | 'neutral' | 'gray' | Color del badge |
size | 'sm' | 'md' | 'lg' | 'md' | Tamaño del badge |
dot | boolean | false | Muestra un punto indicador de color |
outline | boolean | false | Aplica estilo con borde |
pill | boolean | false | Aplica bordes completamente redondeados |
removable | boolean | 'stopPropagation' | false | Muestra un botón de eliminar. Usa 'stopPropagation' para detener la propagación del evento |
reverse | boolean | false | Invierte el orden del tag y el contenido |
class | string | - | Clases CSS adicionales |
Eventos
| Evento | Payload | Descripción |
|---|---|---|
removed | - | Se emite cuando se hace clic en el botón de eliminar |
Slots
| Nombre | Descripción |
|---|---|
default | Contenido del badge |
tag | Sección de etiqueta resaltada dentro del badge |