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

Thành phần nút

Cập nhật lần cuối:

Nút CSS Tailwind chỉ có CSS ​​với các biến thể chính, phụ, dấu, bóng, đường viền và mềm. Kích thước xs-xl, trạng thái tải, nút tắt và biểu tượng. Chỉ CSS, WCAG AA, hoạt động với Django, HTMX, Laravel, React.

Thành phần nút là thành phần tương tác kích hoạt hành động hoặc điều hướng người dùng đến trang mới. Hệ thống nút Frutjam cung cấp nhiều kích thước, màu sắc và kiểu dáng thông qua các lớp sửa đổi — tất cả đều được xây dựng bằng phương pháp tiếp cận tiện ích Tailwind CSS đầu tiên dành cho các nút nhẹ, có khả năng tùy chỉnh cao, hoạt động liền mạch trên các khung và dự án.

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

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>

Using Claude Code, Cursor, or another AI editor?

Cherry MCP cung cấp cho trình soạn thảo AI của bạn tên và cấu trúc lớp Cái nút chính xác theo yêu cầu. Không còn những lớp học ảo giác nữa.

Try Cherry MCP