---
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/vi/components/button
---

# Button Component

 Button components are interactive elements that trigger actions or navigate users to new pages. The Frutjam button system offers multiple sizes, colors, and styles through modifier classes — all built with Tailwind CSS utility-first approach for lightweight, highly customizable buttons that work seamlessly across frameworks and projects.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học       | Kiểu            | Sự miêu tả                                       |
| ------------- | --------------- | ------------------------------------------------ |
| btn           | Căn cứ          | Styled button element                            |
| btn-outline   | Phong cách      | Transparent fill with colored border             |
| btn-soft      | Phong cách      | Nền màu bị tắt tiếng                             |
| btn-ghost     | Phong cách      | Subtle background visible only on hover          |
| btn-dashed    | Phong cách      | Kiểu đường viền nét đứt                          |
| btn-plain     | Phong cách      | No background or border, text only               |
| btn-link      | Phong cách      | Styled as a text hyperlink                       |
| btn-pill      | Phong cách      | Hình dạng viên thuốc tròn hoàn toàn              |
| btn-rounded   | Phong cách      | Làm tròn vừa phải                                |
| btn-circle    | Phong cách      | Equal-width circle for icon buttons              |
| btn-square    | Phong cách      | Hình vuông không bo tròn                         |
| btn-block     | Công cụ sửa đổi | Full-width block button                          |
| btn-wide      | Công cụ sửa đổi | Wider than default with extra horizontal padding |
| btn-active    | Công cụ sửa đổi | Forces the active/pressed visual state           |
| btn-disabled  | Công cụ sửa đổi | Disabled appearance for non-button elements      |
| btn-xs        | Kích cỡ         | Cực nhỏ                                          |
| btn-sm        | Kích cỡ         | Bé nhỏ                                           |
| btn-md        | Kích cỡ         | Trung bình (mặc định)                            |
| btn-lg        | Kích cỡ         | Lớn                                              |
| btn-xl        | Kích cỡ         | Cực lớn                                          |
| btn-2xl       | Kích cỡ         | 2× extra large                                   |
| btn-primary   | Màu sắc         | Màu chủ đề chính                                 |
| btn-secondary | Màu sắc         | Màu chủ đề phụ                                   |
| btn-accent    | Màu sắc         | Màu chủ đề nhấn mạnh                             |
| btn-neutral   | Màu sắc         | Màu chủ đề trung tính                            |
| btn-info      | Màu sắc         | Màu sắc ngữ nghĩa thông tin                      |
| btn-success   | Màu sắc         | Màu ngữ nghĩa thành công                         |
| btn-warning   | Màu sắc         | Màu ngữ nghĩa cảnh báo                           |
| btn-error     | Màu sắc         | Lỗi ngữ nghĩa màu sắc                            |

## Cách sử dụng cơ bản

## Button Sizes

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

## Button Colors

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

## Button Styles

### Soft Buttons

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

### Dashed Buttons

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

### Outline Buttons

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

### Ghost Buttons

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

### Link Buttons

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

## Button Shapes

### Circle Button

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

### Rounded Button

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

### Square Button

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

### Pill Button

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

## Button States

### Active Buttons

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

### Disabled Button

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

## Button Widths

### Wide Button

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

### Block Button

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

## Button Tag Flexibility

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