---
title: "Tag"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Tag for content labels, categories, and filters. Multiple sizes, colors, and shapes for skill lists, article metadata, and product attributes."
url: https://frutjam.com/id/components/tag
---

# Tag Component

Komponen tag menampilkan potongan informasi kecil yang diberi label, digunakan untuk mengkategorikan, memfilter, atau memberi label pada konten. Dibangun dengan HTML semantik dan gaya fleksibel, tag membantu pengguna mengidentifikasi jenis konten, status, atau kategori dengan cepat. Sistem tag Frutjam mendukung berbagai ukuran, warna, gaya, dan bentuk—ideal untuk daftar keahlian, kategori artikel, label status, dan metadata konten.

Hanya CSS, tidak diperlukan JavaScript. WCAG AA dapat diakses dan tidak memiliki kerangka kerja — bekerja dengan Django, HTMX, Laravel, React, dan tumpukan apa pun.

| Kelas         | Jenis    | Keterangan                                                       |
| ------------- | -------- | ---------------------------------------------------------------- |
| tag           | Basis    | Label sebaris untuk mengkategorikan atau mengidentifikasi konten |
| tag-outline   | Gaya     | Isian transparan dengan pinggiran berwarna                       |
| tag-soft      | Gaya     | Latar belakang berwarna teredam                                  |
| tag-square    | Gaya     | Sedikit membulat (kurang dari pil standar)                       |
| tag-remove    | Pengubah | Tombol tutup/hapus di dalam tag                                  |
| tag-xs        | Ukuran   | Ekstra kecil (font 0,6875rem)                                    |
| tag-sm        | Ukuran   | Kecil (font 0,75rem)                                             |
| tag-md        | Ukuran   | Sedang (font 0,8125rem, default)                                 |
| tag-lg        | Ukuran   | Besar (font 0,9375rem)                                           |
| tag-xl        | Ukuran   | Ekstra besar (font 1rem)                                         |
| tag-primary   | Warna    | Warna tema utama                                                 |
| tag-secondary | Warna    | Warna tema sekunder                                              |
| tag-accent    | Warna    | Warna tema aksen                                                 |
| tag-neutral   | Warna    | Warna tema netral                                                |
| tag-info      | Warna    | Info warna semantik                                              |
| tag-success   | Warna    | Warna semantik sukses                                            |
| tag-warning   | Warna    | Warna semantik peringatan                                        |
| tag-error     | Warna    | Kesalahan warna semantik                                         |

## Penggunaan Dasar

## Ukuran Tanda

```html
<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>
```

## Warna Tandai

```html
<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>
```

## Gaya Tag

```html
<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>
```

## Bentuk Tag

```html
<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>
```

## Tandai dengan Ikon

```html
<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>
```

## Tag yang Dapat Ditutup

```html
<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>
```

## Daftar Tag

```html
<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>
```