Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de etiqueta

Última actualización:

Etiqueta CSS Tailwind solo CSS (chip) con variantes de color, estilo suave y botón extraíble. Tallas xs-lg. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes de etiquetas muestran pequeños fragmentos de información etiquetados que se utilizan para categorizar, filtrar o etiquetar contenido. Creadas con HTML semántico y estilo flexible, las etiquetas ayudan a los usuarios a identificar rápidamente el tipo, estado o categoría del contenido. El sistema de etiquetas Frutjam admite múltiples tamaños, colores, estilos y formas, ideal para listas de habilidades, categorías de artículos, etiquetas de estado y metadatos de contenido.

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
tagBaseEtiqueta en línea para categorizar o identificar contenido
tag-outlineEstiloRelleno transparente con borde de color.
tag-softEstiloFondo teñido apagado
tag-squareEstiloLigero redondeo (menos que la pastilla predeterminada)
tag-removeModificadorBotón descartar/eliminar dentro de la etiqueta
tag-xsTamañoExtra pequeño (fuente 0,6875rem)
tag-smTamañoPequeño (fuente 0,75rem)
tag-mdTamañoMediano (fuente 0.8125rem, predeterminada)
tag-lgTamañoGrande (fuente 0,9375rem)
tag-xlTamañoExtra grande (fuente 1rem)
tag-primaryColorColor del tema principal
tag-secondaryColorColor del tema secundario
tag-accentColorColor del tema de acento
tag-neutralColorColor de tema neutro
tag-infoColorColor semántico de información
tag-successColorColor semántico del éxito
tag-warningColorColor semántico de advertencia
tag-errorColorColor semántico del error

Uso básico

1
2
3
<div class="tag">Tag</div>
<div class="tag">Another tag</div>
<div class="tag">Third tag</div>

1
2
3
<div className="tag">Tag</div>
<div className="tag">Another tag</div>
<div className="tag">Third tag</div>

Tamaños de etiquetas

html 
1
2
3
4
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>

Colores de etiqueta

html 
1
2
3
4
5
6
7
8
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>

Estilos de etiquetas

html 
1
2
3
4
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>

Formas de etiquetas

html 
1
2
3
4
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>

Etiqueta con icono

html 
1
2
3
4
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>

Etiquetas que se pueden cerrar

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

Lista de etiquetas

html 
1
2
3
4
5
6
7
8
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>

¿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 Etiqueta según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP