Insignia CSS de Tailwind solo para CSS con variantes primaria, secundaria, acento, información, éxito, advertencia y error. Estilos suave, de contorno y fantasma, tamaños xs-lg. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.
Los componentes de la insignia son etiquetas pequeñas y compactas que se utilizan para resaltar, categorizar o mostrar información de estado. Creadas con HTML semántico y CSS Tailwind, las insignias admiten múltiples tamaños, colores y estilos para una integración flexible en tablas, tarjetas, perfiles de usuario y sistemas de notificación. Ligeras y accesibles, las insignias mejoran la jerarquía de la información sin añadir desorden visual.
Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.
| Clase | Tipo | Descripción |
|---|---|---|
| badge | Base | Pequeña etiqueta en línea |
| badge-outline | Estilo | Relleno transparente con borde de color. |
| badge-soft | Estilo | Fondo teñido apagado |
| badge-ghost | Estilo | Fondo sutil sin borde |
| badge-dashed | Estilo | Estilo de borde discontinuo |
| badge-pill | Estilo | Forma de pastilla totalmente redondeada. |
| badge-rounded | Estilo | redondeo moderado |
| badge-circle | Estilo | Círculo de igual ancho para caracteres o números individuales |
| badge-square | Estilo | Cuadrado sin redondeo |
| badge-xs | Tamaño | extrapequeño |
| badge-sm | Tamaño | Pequeño |
| badge-md | Tamaño | Medio (predeterminado) |
| badge-lg | Tamaño | Grande |
| badge-xl | Tamaño | Extra grande |
| badge-2xl | Tamaño | 2× extra grande |
| badge-primary | Color | Color del tema principal |
| badge-secondary | Color | Color del tema secundario |
| badge-accent | Color | Color del tema de acento |
| badge-neutral | Color | Color de tema neutro |
| badge-info | Color | Color semántico de información |
| badge-success | Color | Color semántico del éxito |
| badge-warning | Color | Color semántico de advertencia |
| badge-error | Color | Color semántico del error |
Uso básico
<span class="badge">Badge</span> |
<span className="badge">Badge</span> |
Tamaños de insignias
html
1 2 3 4 5 6 | <span class="badge badge-xs">Xsmall</span> <span class="badge badge-sm">Small</span> <span class="badge badge-md">Medium</span> <span class="badge badge-lg">Large</span> <span class="badge badge-xl">Xlarge</span> <span class="badge badge-2xl">2XLarge</span> |
Colores de la insignia
html
1 2 3 4 5 6 7 8 9 | <span class="badge">Default</span> <span class="badge badge-primary">Primary</span> <span class="badge badge-secondary">Secondary</span> <span class="badge badge-accent">Accent</span> <span class="badge badge-info">Info</span> <span class="badge badge-success">Success</span> <span class="badge badge-warning">Warning</span> <span class="badge badge-error">Error</span> <span class="badge badge-neutral">Neutral</span> |
Estilos de insignia
Insignias suaves
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-soft">Default</span> <span class="badge badge-soft badge-primary">Primary</span> <span class="badge badge-soft badge-secondary">Secondary</span> <span class="badge badge-soft badge-accent">Accent</span> <span class="badge badge-soft badge-info">Info</span> <span class="badge badge-soft badge-success">Success</span> <span class="badge badge-soft badge-warning">Warning</span> <span class="badge badge-soft badge-error">Error</span> <span class="badge badge-soft badge-neutral">Neutral</span> |
Insignias de contorno
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-outline">Default</span> <span class="badge badge-outline badge-primary">Primary</span> <span class="badge badge-outline badge-secondary">Secondary</span> <span class="badge badge-outline badge-accent">Accent</span> <span class="badge badge-outline badge-info">Info</span> <span class="badge badge-outline badge-success">Success</span> <span class="badge badge-outline badge-warning">Warning</span> <span class="badge badge-outline badge-error">Error</span> <span class="badge badge-outline badge-neutral">Neutral</span> |
Insignias discontinuas
html
1 2 3 4 5 6 7 8 9 | <span class="badge badge-dashed">Default</span> <span class="badge badge-dashed badge-primary">Primary</span> <span class="badge badge-dashed badge-secondary">Secondary</span> <span class="badge badge-dashed badge-accent">Accent</span> <span class="badge badge-dashed badge-info">Info</span> <span class="badge badge-dashed badge-success">Success</span> <span class="badge badge-dashed badge-warning">Warning</span> <span class="badge badge-dashed badge-error">Error</span> <span class="badge badge-dashed badge-neutral">Neutral</span> |
Insignias de fantasmas
html
<span class="badge badge-ghost">Ghost</span> |
Formas de insignia
Insignia redondeada
html
<span class="badge badge-error badge-rounded">10</span> |
Insignia de píldora
html
<span class="badge badge-warning badge-pill">Pill badge</span> |
Insignia cuadrada
html
<span class="badge badge-neutral badge-square">99+</span> |
Insignia del círculo
html
1 2 3 | <span class="badge badge-success badge-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M5 12l5 5l10 -10" /></svg> </span> |
Indicadores de insignia
Las insignias vacías son perfectas para indicadores de estado o puntos de notificación.
html
1 2 3 4 5 | <span class="badge badge-primary badge-circle badge-lg"></span> <span class="badge badge-primary badge-lg"></span> <span class="badge badge-primary badge-md"></span> <span class="badge badge-primary badge-sm"></span> <span class="badge badge-primary badge-xs"></span> |
Composición de la insignia
Integre insignias con íconos o anídelas dentro de otros componentes como botones.
Insignia con icono
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | <span class="badge badge-info"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="M12 16v-4"></path> <path d="M12 8h.01"></path> </svg> Info </span> <span class="badge badge-success"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m9 12 2 2 4-4"></path> </svg> Success </span> <span class="badge badge-warning"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path> <path d="M12 9v4"></path> <path d="M12 17h.01"></path> </svg> Warning </span> <span class="badge badge-error"> <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <circle cx="12" cy="12" r="10"></circle> <path d="m4.9 4.9 14.2 14.2"></path> </svg> Error </span> |
Botón interior de la insignia
html
1 2 3 4 5 6 7 8 | <button class="btn btn-primary btn-sm btn-active"> Message <span class="badge badge-primary badge-xs">+49</span> </button> <button class="btn btn-sm"> Inbox <span class="badge badge-xs badge-primary">+27</span> </button> |
¿Usando Claude Code, Cursor u otro editor de IA?
Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases Insignia según sea necesario. No más clases alucinadas.