ComponentComponent cơ bản
Bắt đầu nhanh
Import Button từ entry công khai. Các ví dụ bên dưới thể hiện những kiểu tương tác và cấu hình được hỗ trợ.
component.tsxtsx
import { Button } from '@underverse-ui/underverse';Ví dụ tương tác
Dùng thử Button thật, xem mã ví dụ và tra cứu các prop đã được mô tả.
Đang tải ví dụ tương tác…
Tham chiếu
Tham chiếu API
Tra cứu các thuộc tính, kiểu dữ liệu được chấp nhận, giá trị mặc định và lưu ý về hành vi.
Dữ liệu được sinh từ API TypeScript công khai của thư viện. Kiểu dữ liệu, thuộc tính bắt buộc và giá trị mặc định luôn đồng bộ với mã nguồn.
Button
Component| Thuộc tính | Mô tả | Kiểu | Mặc định |
|---|---|---|---|
onClick | Hàm xử lý khi click; có thể trả Promise (phù hợp với preventDoubleClick). | (event: React.MouseEvent<HTMLButtonElement>) => void | — |
children | Nội dung của nút. | React.ReactNode | — |
type | Kiểu nút trong form. | "button" | "submit" | "reset" | "button" |
icon | Icon bên trái. | React.ComponentType<{ className?: string }> | — |
iconRight | Icon bên phải. | React.ComponentType<{ className?: string }> | — |
variant | Kiểu giao diện của nút. | keyof typeof VARIANT_STYLES_BTN | "default" |
size | Kích thước nút (bao gồm kiểu icon-only). | keyof typeof SIZE_STYLES_BTN | "md" |
className | Class tuỳ biến cho nút. | string | "" |
iConClassName | Class tuỳ biến cho icon trái. | string | "" |
disabled | Vô hiệu hoá nút. | boolean | false |
loading | Hiển thị trạng thái loading và khoá thao tác. | boolean | false |
fullWidth | Chiếm toàn bộ chiều ngang container. | boolean | false |
title | Tooltip/native title; dự phòng cho aria-label. | string | — |
spinner | Component spinner tuỳ biến khi loading. | React.ComponentType<{ className?: string }> | — |
loadingText | Văn bản hiển thị khi loading. | React.ReactNode | — |
preserveChildrenOnLoading | Giữ nguyên children khi loading. | boolean | false |
preventDoubleClick | Chống double-click gửi lệnh liên tục. | boolean | false |
lockMs | Thời gian khoá (ms) cho chống double-click. | number | 600 |
asContainer | Tự do bố cục (không ép items-center). | boolean | false |
noWrap | Không xuống dòng nội dung. | boolean | true |
noHoverOverlay | Tắt overlay gradient khi hover. | boolean | false |
gradient | Bật nền gradient (tương đương variant="gradient"). | boolean | false |
borderMode | Mã nguồn chưa cung cấp mô tả bổ sung. | BorderMode | — |
Hướng dẫn sử dụng
Dùng Button như một khối giao diện nền tảng đáng tin cậy. Ưu tiên HTML có ngữ nghĩa, dùng biến thể có mục đích và không ghi đè các trạng thái truyền đạt ý nghĩa.
Trợ năng
Khi dùng Button, hãy giữ trạng thái focus dễ nhận biết, cung cấp tên truy cập khi cần và kiểm tra bàn phím cùng trình đọc màn hình trong ngữ cảnh thực tế.