---
title: "Button"
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 Button with solid, outline, ghost, and soft variants. Multiple sizes, loading states, and full keyboard accessibility—no JavaScript required."
url: https://frutjam.com/id/components/button
---

# Button Component

 Komponen tombol adalah elemen interaktif yang memicu tindakan atau mengarahkan pengguna ke halaman baru. Sistem tombol Frutjam menawarkan berbagai ukuran, warna, dan gaya melalui kelas pengubah — semuanya dibangun dengan pendekatan yang mengutamakan utilitas Tailwind CSS untuk tombol ringan dan sangat dapat disesuaikan yang bekerja dengan lancar di seluruh kerangka kerja dan proyek.

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                                                  |
| ------------- | -------- | ----------------------------------------------------------- |
| btn           | Basis    | Elemen tombol bergaya                                       |
| btn-outline   | Gaya     | Isi transparan dengan batas berwarna                        |
| btn-soft      | Gaya     | Latar belakang berwarna teredam                             |
| btn-ghost     | Gaya     | Latar belakang halus hanya terlihat saat mengarahkan kursor |
| btn-dashed    | Gaya     | Gaya perbatasan putus-putus                                 |
| btn-plain     | Gaya     | Tanpa latar belakang atau batas, hanya teks                 |
| btn-link      | Gaya     | Ditata sebagai hyperlink teks                               |
| btn-pill      | Gaya     | Bentuk pil bulat penuh                                      |
| btn-rounded   | Gaya     | Pembulatan sedang                                           |
| btn-circle    | Gaya     | Lingkaran dengan lebar yang sama untuk tombol ikon          |
| btn-square    | Gaya     | Bentuk persegi tanpa pembulatan                             |
| btn-block     | Pengubah | Tombol blok lebar penuh                                     |
| btn-wide      | Pengubah | Lebih lebar dari standar dengan bantalan horizontal ekstra  |
| btn-active    | Pengubah | Memaksa keadaan visual aktif/ditekan                        |
| btn-disabled  | Pengubah | Tampilan dinonaktifkan untuk elemen non-tombol              |
| btn-xs        | Ukuran   | Sangat kecil                                                |
| btn-sm        | Ukuran   | Kecil                                                       |
| btn-md        | Ukuran   | Sedang (standar)                                            |
| btn-lg        | Ukuran   | Besar                                                       |
| btn-xl        | Ukuran   | Ekstra besar                                                |
| btn-2xl       | Ukuran   | 2× ekstra besar                                             |
| btn-primary   | Warna    | Warna tema utama                                            |
| btn-secondary | Warna    | Warna tema sekunder                                         |
| btn-accent    | Warna    | Warna tema aksen                                            |
| btn-neutral   | Warna    | Warna tema netral                                           |
| btn-info      | Warna    | Info warna semantik                                         |
| btn-success   | Warna    | Warna semantik sukses                                       |
| btn-warning   | Warna    | Warna semantik peringatan                                   |
| btn-error     | Warna    | Kesalahan warna semantik                                    |

## Penggunaan Dasar

## Ukuran Tombol

```html
<button class="btn btn-xs">Xsmall</button>
<button class="btn btn-sm">Small</button>
<button class="btn btn-md">Medium</button>
<button class="btn btn-lg">Large</button>
<button class="btn btn-xl">Xlarge</button>
<button class="btn btn-2xl">2XLarge</button>
```

## Warna Tombol

```html
<button class="btn">Default</button>
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-accent">Accent</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-error">Error</button>
<button class="btn btn-neutral">Neutral</button>
```

## Gaya Tombol

### Tombol Lembut

```html
<button class="btn btn-soft">Default</button>
<button class="btn btn-primary btn-soft">Primary</button>
<button class="btn btn-secondary btn-soft">Secondary</button>
<button class="btn btn-accent btn-soft">Accent</button>
<button class="btn btn-info btn-soft">Info</button>
<button class="btn btn-success btn-soft">Success</button>
<button class="btn btn-warning btn-soft">Warning</button>
<button class="btn btn-error btn-soft">Error</button>
<button class="btn btn-neutral btn-soft">Neutral</button>
```

### Tombol Putus-putus

```html
<button class="btn btn-dashed">Default</button>
<button class="btn btn-dashed btn-primary">Primary</button>
<button class="btn btn-dashed btn-secondary">Secondary</button>
<button class="btn btn-dashed btn-accent">Accent</button>
<button class="btn btn-dashed btn-info">Info</button>
<button class="btn btn-dashed btn-success">Success</button>
<button class="btn btn-dashed btn-warning">Warning</button>
<button class="btn btn-dashed btn-error">Error</button>
<button class="btn btn-dashed btn-neutral">Neutral</button>
```

### Tombol Garis Besar

```html
<button class="btn btn-outline">Default</button>
<button class="btn btn-outline btn-primary">Primary</button>
<button class="btn btn-outline btn-secondary">Secondary</button>
<button class="btn btn-outline btn-accent">Accent</button>
<button class="btn btn-outline btn-info">Info</button>
<button class="btn btn-outline btn-success">Success</button>
<button class="btn btn-outline btn-warning">Warning</button>
<button class="btn btn-outline btn-error">Error</button>
<button class="btn btn-outline btn-neutral">Neutral</button>
```

### Tombol Hantu

```html
<button class="btn-ghost btn">Default</button>
<button class="btn btn-ghost btn-primary">Primary</button>
<button class="btn btn-ghost btn-secondary">Secondary</button>
<button class="btn btn-ghost btn-accent">Accent</button>
<button class="btn btn-ghost btn-info">Info</button>
<button class="btn btn-ghost btn-success">Success</button>
<button class="btn btn-ghost btn-warning">Warning</button>
<button class="btn btn-ghost btn-error">Error</button>
<button class="btn btn-ghost btn-neutral">Neutral</button>
```

### Tombol Tautan

```html
<button class="btn btn-link">Default</button>
<button class="btn btn-primary btn-link">Primary</button>
<button class="btn btn-secondary btn-link">Secondary</button>
<button class="btn btn-accent btn-link">Accent</button>
<button class="btn btn-info btn-link">Info</button>
<button class="btn btn-success btn-link">Success</button>
<button class="btn btn-warning btn-link">Warning</button>
<button class="btn btn-error btn-link">Error</button>
<button class="btn btn-neutral btn-link">Neutral</button>
```

## Bentuk Tombol

### Tombol Lingkaran

```html
<button class="btn btn-circle">
  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" 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="M4 8l16 0" /><path d="M4 16l16 0" /></svg>
</button>
```

### Tombol Bulat

```html
<button class="btn btn-error btn-rounded" aria-label="Remove from favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>
```

### Tombol Persegi

```html
<button class="btn btn-primary btn-square" aria-label="Add to favorites">
  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18">
    <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path>
  </svg>
</button>
```

### Tombol Pil

```html
<button class="btn btn-primary btn-pill">
  Pill button
</button>
```

## Status Tombol

### Tombol Aktif

```html
<button class="btn btn-active">Default</button>
<button class="btn btn-primary btn-active">Primary</button>
<button class="btn btn-secondary btn-active">Secondary</button>
<button class="btn btn-accent btn-active">Accent</button>
<button class="btn btn-info btn-active">Info</button>
<button class="btn btn-success btn-active">Success</button>
<button class="btn btn-warning btn-active">Warning</button>
<button class="btn btn-error btn-active">Error</button>
<button class="btn btn-neutral btn-active">Neutral</button>
```

### Tombol Dinonaktifkan

```html
<button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button>
<button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true">
  Disabled using class name
</button>
```

## Lebar Tombol

### Tombol Lebar

```html
<button class="btn btn-primary btn-wide">Wide</button>
```

### Tombol Blokir

```html
<button class="btn btn-primary btn-block">Block</button>
```

## Fleksibilitas Tag Tombol

```html
<input type="button" value="Input" class="btn btn-primary">
<input type="submit" value="Submit" class="btn btn-primary">
<input type="radio" aria-label="Radio" class="btn btn-primary">
<input type="checkbox" aria-label="Checkbox" class="btn btn-primary">
<input type="reset" value="Reset" class="btn btn-primary">
<button type="submit" class="btn btn-primary">Button</button>
<a role="button" class="btn btn-primary">Link</a>
```