Badge

Etiqueta compacta para estados, categorías o metadatos. Diseñada para no competir con el contenido principal.

Preview principal

BADGE5 variantes

PredeterminadoÉxitoErrorAvisoInfo

Neutra + semánticas. No debe competir con el contenido principal.

Tamaños

sm · md (default) · lg.

Smallsm

Mediummd

Largelg

Con indicador

dot — círculo de 6px con el color del estado.

En líneaOfflineEn revisiónNuevo

Con icono

Prop icon con un nombre Lucide del set curado.

CompletadoNovedadDestacadoEtiqueta

Pill

Forma por defecto (border-radius 999). Ejemplo con icono.

EquipoVerificadoBetaDestacado

Variantes

Variante	Uso
default	Categorías neutras, tags, metadatos
success	Activo, completado, online
error	Fallido, offline, eliminado
warning	Pendiente, en revisión
info	Informativo, nuevo, beta

Tamaños

Tamaño	Font	Padding
sm	10px	3×8
md	12px	4×10
lg	14px	6×14

Con indicador (dot)

<Badge variant="success" dot>Activo</Badge>
<Badge variant="error" dot>Offline</Badge>

El dot es un círculo de 6px con el color del estado.

Con icono

<Badge variant="info" icon="bell">Novedad</Badge>

Pill

La forma es pill por defecto (border-radius: 999). Con icono:

<Badge icon="user">Equipo</Badge>
<Badge variant="success" icon="check">Verificado</Badge>

Uso

import { Badge } from "devsoftec-ui";

<Badge>Default</Badge>
<Badge variant="success">Éxito</Badge>
<Badge size="sm">Pequeño</Badge>
<Badge variant="success" icon="check">Completado</Badge>

Accesibilidad

• Si comunica un estado importante, no dependas solo del color: incluye texto.
• Decorativos: aria-hidden="true".