Skip to main content
Frutjam logo Frutjam
v2.2.5
Theme

Tag Component

Last updated:

CSS-only Tailwind CSS tag (chip) with color variants, soft style, and removable button. Sizes xs-lg. WCAG AA accessible, works with Django, HTMX, Laravel, React, and any stack.

Tag components display small, labeled pieces of information, used for categorizing, filtering, or labeling content. Built with semantic HTML and flexible styling, tags help users quickly identify content type, status, or category. The Frutjam tag system supports multiple sizes, colors, styles, and shapes—ideal for skill lists, article categories, status labels, and content metadata.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

Class Type Description
tagBaseInline label for categorizing or identifying content
tag-outlineStyleTransparent fill with a colored border
tag-softStyleMuted tinted background
tag-squareStyleSlight rounding (less than default pill)
tag-removeModifierDismiss/remove button inside the tag
tag-xsSizeExtra small (0.6875rem font)
tag-smSizeSmall (0.75rem font)
tag-mdSizeMedium (0.8125rem font, default)
tag-lgSizeLarge (0.9375rem font)
tag-xlSizeExtra large (1rem font)
tag-primaryColorPrimary theme color
tag-secondaryColorSecondary theme color
tag-accentColorAccent theme color
tag-neutralColorNeutral theme color
tag-infoColorInfo semantic color
tag-successColorSuccess semantic color
tag-warningColorWarning semantic color
tag-errorColorError semantic color

Basic Usage

Tag
Another tag
Third tag
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>

Tag Sizes

Extra Small
Small
Medium
Large
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>

Tag Colors

Default
Primary
Secondary
Accent
Info
Success
Warning
Error
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>

Tag Styles

Default
Outline
Soft
Dashed
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>

Tag Shapes

Square
Rounded
Pill
C
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>

Tag with Icon

Starred
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>

Closeable Tags

JavaScript
React
TypeScript
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>

Tag List

JavaScript
React
CSS
UI Design
Frontend
Production
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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP gives your AI editor the exact Tag class names and structure on demand. No more hallucinated classes.

Try Cherry MCP