---
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/zh-hant/components/button
---

# Button Component

 按鈕元件是觸發操作或將使用者導航到新頁面的互動元素。 Frutjam 按鈕系統透過修飾符類提供多種尺寸、顏色和样式 - 全部採用 Tailwind CSS 實用程式優先方法構建，用於輕量級、高度可自訂的按鈕，可跨框架和項目無縫工作。

僅 CSS，無需 JavaScript。 WCAG AA 可存取且與框架無關 - 可與 Django、HTMX、Laravel、React 和任何堆疊配合使用。

| 班級            | 類型  | 描述                |
| ------------- | --- | ----------------- |
| btn           | 根據  | 樣式按鈕元素            |
| btn-outline   | 風格  | 帶有彩色邊框的透明填充       |
| btn-soft      | 風格  | 柔和的有色背景           |
| btn-ghost     | 風格  | 微妙的背景僅在懸停時可見      |
| btn-dashed    | 風格  | 虛線邊框樣式            |
| btn-plain     | 風格  | 無背景或邊框，僅文本        |
| btn-link      | 風格  | 樣式為文字超連結          |
| btn-pill      | 風格  | 全圓形藥丸形狀           |
| btn-rounded   | 風格  | 適度舍入              |
| btn-circle    | 風格  | 圖示按鈕的等寬圓圈         |
| btn-square    | 風格  | 方形，無圓角            |
| btn-block     | 修飾符 | 全角塊按鈕             |
| btn-wide      | 修飾符 | 比預設值更寬，並具有額外的水平填充 |
| btn-active    | 修飾符 | 強制啟動/按下視覺狀態       |
| btn-disabled  | 修飾符 | 非按鈕元素的禁用外觀        |
| btn-xs        | 尺寸  | 特小號               |
| btn-sm        | 尺寸  | 小的                |
| btn-md        | 尺寸  | 中（預設）             |
| btn-lg        | 尺寸  | 大的                |
| btn-xl        | 尺寸  | 特大號               |
| btn-2xl       | 尺寸  | 2×特大號             |
| btn-primary   | 顏色  | 主要主題顏色            |
| btn-secondary | 顏色  | 次要主題色             |
| btn-accent    | 顏色  | 強調主題顏色            |
| btn-neutral   | 顏色  | 中性主題色             |
| btn-info      | 顏色  | 訊息語意顏色            |
| btn-success   | 顏色  | 成功語意色             |
| btn-warning   | 顏色  | 警告語意顏色            |
| btn-error     | 顏色  | 錯誤語意顏色            |

## 基本用法

## 按鈕尺寸

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

## 按鈕顏色

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

## 按鈕樣式

### 軟按鈕

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

### 虛線按鈕

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

### 輪廓按鈕

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

### 幽靈按鈕

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

### 連結按鈕

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

## 按鈕形狀

### 圓形按鈕

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

### 圓形按鈕

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

### 方形按鈕

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

### 藥丸按鈕

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

## 按鈕狀態

### 活動按鈕

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

### 禁用按鈕

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

## 按鈕寬度

### 寬按鈕

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

### 阻止按鈕

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

## 按鈕標籤靈活性

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