Ir para o conteúdo principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente de etiqueta

Última atualização:

Tag CSS Tailwind somente CSS (chip) com variantes de cores, estilo suave e botão removível. Tamanhos xs-lg. WCAG AA acessível, funciona com Django, HTMX, Laravel, React e qualquer pilha.

Os componentes da tag exibem pequenas informações rotuladas, usadas para categorizar, filtrar ou rotular o conteúdo. Construídas com HTML semântico e estilo flexível, as tags ajudam os usuários a identificar rapidamente o tipo, status ou categoria do conteúdo. O sistema de tags Frutjam oferece suporte a vários tamanhos, cores, estilos e formas – ideal para listas de habilidades, categorias de artigos, rótulos de status e metadados de conteúdo.

Somente CSS, sem necessidade de JavaScript. WCAG AA acessível e independente de estrutura - funciona com Django, HTMX, Laravel, React e qualquer pilha.

Aula Tipo Descrição
tagBaseRótulo embutido para categorizar ou identificar conteúdo
tag-outlineEstiloPreenchimento transparente com borda colorida
tag-softEstiloFundo colorido silenciado
tag-squareEstiloLigeiro arredondamento (menor que o comprimido padrão)
tag-removeModificadorBotão dispensar/remover dentro da tag
tag-xsTamanhoExtra pequeno (fonte 0,6875rem)
tag-smTamanhoPequeno (fonte 0,75rem)
tag-mdTamanhoMédio (fonte 0,8125rem, padrão)
tag-lgTamanhoGrande (fonte 0,9375rem)
tag-xlTamanhoExtra grande (fonte 1rem)
tag-primaryCorCor do tema principal
tag-secondaryCorCor do tema secundário
tag-accentCorCor do tema de destaque
tag-neutralCorCor neutra do tema
tag-infoCorCor semântica da informação
tag-successCorCor semântica de sucesso
tag-warningCorCor semântica de aviso
tag-errorCorCor semântica do erro

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>

Tamanhos de tags

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>

Cores da 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 tags

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 tags

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>

Marcar com ícone

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>

Tags que podem ser fechadas

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 tags

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 ou outro editor de IA?

Cherry MCP fornece ao seu editor de IA os nomes exatos das classes Marcação e a estrutura sob demanda. Chega de aulas alucinadas.

Experimente o Cherry MCP