Chuyển đến nội dung chính
Frutjam logo Frutjam
v2.2.2
Theme

Button Component

CSS-only Tailwind CSS button with primary, secondary, accent, ghost, outline, and soft variants. Sizes xs–xl, loading state, disabled, and icon buttons. CSS-only, WCAG AA, works with Django, HTMX, Laravel, React.

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ả
btnCăn cứStyled button element
btn-outlinePhong cáchTransparent fill with colored border
btn-softPhong cáchNền màu bị tắt tiếng
btn-ghostPhong cáchSubtle background visible only on hover
btn-dashedPhong cáchKiểu đường viền nét đứt
btn-plainPhong cáchNo background or border, text only
btn-linkPhong cáchStyled as a text hyperlink
btn-pillPhong cáchHình dạng viên thuốc tròn hoàn toàn
btn-roundedPhong cáchLàm tròn vừa phải
btn-circlePhong cáchEqual-width circle for icon buttons
btn-squarePhong cáchHình vuông không bo tròn
btn-blockCông cụ sửa đổiFull-width block button
btn-wideCông cụ sửa đổiWider than default with extra horizontal padding
btn-activeCông cụ sửa đổiForces the active/pressed visual state
btn-disabledCông cụ sửa đổiDisabled appearance for non-button elements
btn-xsKích cỡCực nhỏ
btn-smKích cỡBé nhỏ
btn-mdKích cỡTrung bình (mặc định)
btn-lgKích cỡLớn
btn-xlKích cỡCực lớn
btn-2xlKích cỡ2× extra large
btn-primaryMàu sắcMàu chủ đề chính
btn-secondaryMàu sắcMàu chủ đề phụ
btn-accentMàu sắcMàu chủ đề nhấn mạnh
btn-neutralMàu sắcMàu chủ đề trung tính
btn-infoMàu sắcMàu sắc ngữ nghĩa thông tin
btn-successMàu sắcMàu ngữ nghĩa thành công
btn-warningMàu sắcMàu ngữ nghĩa cảnh báo
btn-errorMàu sắcLỗi ngữ nghĩa màu sắc

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

<button class="btn">Button</button>

<button className="btn">Button</button>

Button Sizes

html 
1
2
3
4
5
6
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
<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 
1
2
3
4
5
<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 
1
2
3
4
5
<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 
1
2
3
<button class="btn btn-primary btn-pill">
  Pill button
</button>

Button States

Active Buttons

html 
1
2
3
4
5
6
7
8
9
<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 
1
2
3
4
<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

Link
html 
1
2
3
4
5
6
7
<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>