@openway/ui 1.0.0 → 1.0.1

package/docs/components/badge.md

@@ -0,0 +1,238 @@
+# 🏷️ Badge Component (`@owa/ui`)
+
+Component **Badge** (Huy hiệu / Nhãn trạng thái / Chip) hiệu năng cao, thiết kế chuẩn **Design System**, **Pure Stateless Component** (0 dependencies) và hỗ trợ đầy đủ **WAI-ARIA Accessibility**.
+
+---
+
+## 🌟 Điểm nổi bật
+
+- **Pure Stateless Component**: Render nhanh chóng, không phụ thuộc vào global store, dễ dàng sử dụng ở bất kỳ đâu trong JSX.
+- **5 Kích thước tiêu chuẩn (`size`)**: `xs` (20px), `sm` (24px), `md` (28px - *mặc định*), `lg` (32px), `xl` (36px) với typography, padding và kích thước icon tự động căn chỉnh đồng bộ.
+- **5 Biến thể giao diện (`variant`)**:
+  - `soft` *(mặc định)*: Nền pastel nhạt, chữ đậm, viền mờ 1px nhẹ nhàng, tinh tế.
+  - `filled`: Nền màu đậm, độ tương phản cao, chữ trắng nổi bật.
+  - `outline`: Nền trong suốt, viền đôi 2px rõ nét theo màu chủ đề.
+  - `ghost`: Không viền, nền trong suốt, đổi màu nhẹ khi hover.
+  - `other`: Bỏ qua các class màu mặc định, tự do tùy biến màu sắc / gradient qua `className`.
+- **7 Chủ đề màu sắc (`color`)**: `primary`, `secondary`, `error`, `success`, `warning`, `info`, `neutral`.
+- **Tùy chỉnh bo góc linh hoạt (`radius`)**: `none` (góc vuông), `sm`, `md`, `lg`, `xl`, `full` (*mặc định* - kiểu dáng viên thuốc Pill).
+- **Chấm trạng thái (Status Dot & Radar Ping)**:
+  - `dot={true}`: Hiển thị chấm tròn trạng thái đồng bộ màu sắc.
+  - `dotPing={true}`: Bật hiệu ứng radar pulse nhấp nháy sinh động (thích hợp cho Live Stream, Trạng thái online, Cảnh báo nguy cấp).
+- **Hỗ trợ Icon trước & sau (`leftIcon`, `rightIcon`)**: Tự động scale kích thước icon tương ứng theo `size` của badge.
+- **Chế độ Dismissible Chip (`onDelete`)**: Tích hợp sẵn nút xóa/gỡ bỏ `(X)` với hiệu ứng hover và nhãn trợ năng `deleteAriaLabel`.
+- **Tương tác Click (`onClick`)**: Tự động chuyển đổi thành nút bấm tương tác (`role="button"`, `tabIndex={0}`), kèm hiệu ứng nhấn `active:scale-[0.98]` mượt mà.
+- **Safe Config Fallback**: Tích hợp hàm `getSafeConfig` đảm bảo component luôn an toàn, không bị crash dù truyền giá trị `size`, `variant`, `color`, `radius` không hợp lệ.
+
+---
+
+## 🚀 Cài đặt & Import
+
+```tsx
+import { Badge } from "@owa/ui";
+import type { BadgeProps, BadgeSize, BadgeVariant, BadgeColor, BadgeRadius } from "@owa/ui";
+```
+
+---
+
+## 📖 Hướng dẫn sử dụng
+
+### 1. Cách sử dụng cơ bản
+
+```tsx
+import { Badge } from "@owa/ui";
+
+export function BasicBadgeExample() {
+  return (
+    <div className="flex gap-2 items-center">
+      <Badge>Mặc định</Badge>
+      <Badge color="success">Hoàn thành</Badge>
+      <Badge color="warning" variant="filled">Cảnh báo</Badge>
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Các kích thước (`size`)
+
+Hỗ trợ 5 kích thước chuẩn: `xs`, `sm`, `md` *(mặc định)*, `lg`, `xl`.
+
+```tsx
+<Badge size="xs">Extra Small (20px)</Badge>
+<Badge size="sm">Small (24px)</Badge>
+<Badge size="md">Medium (28px)</Badge>
+<Badge size="lg">Large (32px)</Badge>
+<Badge size="xl">Extra Large (36px)</Badge>
+```
+
+---
+
+### 3. Các biến thể giao diện (`variant`)
+
+```tsx
+// 1. Soft (Mặc định): Nền pastel nhạt
+<Badge variant="soft" color="primary">Soft Primary</Badge>
+
+// 2. Filled: Nền đậm, độ tương phản cao
+<Badge variant="filled" color="primary">Filled Primary</Badge>
+
+// 3. Outline: Nền trong suốt, viền 2px
+<Badge variant="outline" color="primary">Outline Primary</Badge>
+
+// 4. Ghost: Nền trong suốt, không viền
+<Badge variant="ghost" color="primary">Ghost Primary</Badge>
+
+// 5. Other: Tự do tùy biến 100% bằng Tailwind
+<Badge
+  variant="other"
+  className="bg-linear-to-r from-violet-600 to-pink-500 text-white shadow-sm border-0"
+>
+  Gradient VIP
+</Badge>
+```
+
+---
+
+### 4. Các chủ đề màu sắc (`color`)
+
+Cung cấp 7 tông màu theo chuẩn Design System:
+
+```tsx
+<Badge color="primary">Primary</Badge>
+<Badge color="secondary">Secondary</Badge>
+<Badge color="success">Success</Badge>
+<Badge color="error">Error</Badge>
+<Badge color="warning">Warning</Badge>
+<Badge color="info">Info</Badge>
+<Badge color="neutral">Neutral</Badge>
+```
+
+---
+
+### 5. Chấm trạng thái (Status Dot & Radar Ping)
+
+Thích hợp hiển thị trạng thái tài khoản, server, tiến trình:
+
+```tsx
+// Chấm trạng thái tĩnh
+<Badge dot color="success">Online</Badge>
+<Badge dot color="neutral">Offline</Badge>
+<Badge dot color="warning">Pending</Badge>
+
+// Chấm trạng thái nhấp nháy (Radar Pulse Ping)
+<Badge dot dotPing color="error">Live 2.4k</Badge>
+<Badge dot dotPing color="primary" variant="filled">Stream Active</Badge>
+```
+
+---
+
+### 6. Icon trước & sau (`leftIcon`, `rightIcon`)
+
+```tsx
+import { Badge } from "@owa/ui";
+import { SparklesIcon, CheckIcon, ShieldIcon } from "@/components/icons";
+
+export function IconBadgeExample() {
+  return (
+    <div className="flex gap-2">
+      <Badge color="primary" leftIcon={<SparklesIcon />}>
+        Đặc quyền VIP
+      </Badge>
+      <Badge color="success" rightIcon={<CheckIcon />}>
+        Đã xác minh
+      </Badge>
+      <Badge color="secondary" leftIcon={<ShieldIcon />} rightIcon={<CheckIcon />}>
+        Bảo mật cao
+      </Badge>
+    </div>
+  );
+}
+```
+
+---
+
+### 7. Dismissible Chip (Có nút xóa `onDelete`)
+
+Khi truyền prop `onDelete`, Badge sẽ hiển thị nút đóng `(X)` ở góc phải:
+
+```tsx
+import { useState } from "react";
+import { Badge } from "@owa/ui";
+
+export function ChipListExample() {
+  const [tags, setTags] = useState(["React", "TypeScript", "TailwindCSS"]);
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter((tag) => tag !== tagToRemove));
+  };
+
+  return (
+    <div className="flex gap-2 flex-wrap">
+      {tags.map((tag) => (
+        <Badge
+          key={tag}
+          color="primary"
+          onDelete={() => removeTag(tag)}
+          deleteAriaLabel={`Xóa thẻ ${tag}`}
+        >
+          {tag}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
+### 8. Tương tác bấm (`onClick`)
+
+Badge tự động hỗ trợ cursor pointer, hiệu ứng `active:scale-[0.98]`, `role="button"` và `tabIndex={0}`:
+
+```tsx
+<Badge
+  color="info"
+  variant="soft"
+  onClick={() => alert("Đã chọn bộ lọc!")}
+>
+  Bộ lọc: Mới nhất
+</Badge>
+```
+
+---
+
+### 9. Tùy chỉnh bo góc (`radius`)
+
+```tsx
+<Badge radius="none">radius="none" (0px)</Badge>
+<Badge radius="sm">radius="sm" (rounded-sm)</Badge>
+<Badge radius="md">radius="md" (rounded-md)</Badge>
+<Badge radius="lg">radius="lg" (rounded-lg)</Badge>
+<Badge radius="xl">radius="xl" (rounded-xl)</Badge>
+<Badge radius="full">radius="full" (Pill - Mặc định)</Badge>
+```
+
+---
+
+## 🛠️ API Reference (`BadgeProps`)
+
+Component `Badge` nhận các props mở rộng từ thẻ HTML chuẩn `HTMLAttributes<HTMLSpanElement>`:
+
+| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Kích cỡ của badge (ảnh hưởng chiều cao, padding, font size, icon size). |
+| `variant` | `"soft" \| "filled" \| "outline" \| "ghost" \| "other"` | `"soft"` | Biến thể giao diện và phong cách hiển thị màu sắc. |
+| `color` | `"primary" \| "secondary" \| "error" \| "success" \| "warning" \| "info" \| "neutral"` | `"primary"` | Chủ đề màu sắc theo Design System. |
+| `radius` | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | `"full"` | Độ bo góc của badge. |
+| `dot` | `boolean` | `false` | Hiển thị chấm tròn trạng thái ở đầu badge. |
+| `dotPing` | `boolean` | `false` | Bật hiệu ứng nhấp nháy (pulse) cho chấm tròn trạng thái. |
+| `leftIcon` | `ReactNode` | `undefined` | Icon hoặc phần tử hiển thị phía trước nội dung. |
+| `rightIcon` | `ReactNode` | `undefined` | Icon hoặc phần tử hiển thị phía sau nội dung (ẩn khi có `onDelete`). |
+| `onDelete` | `() => void` | `undefined` | Callback khi người dùng bấm nút xóa `(X)` trên badge. |
+| `deleteAriaLabel` | `string` | `"Remove"` | Nhãn trợ năng (accessibility) cho nút xóa `(X)`. |
+| `children` | `ReactNode` | `undefined` | Nội dung văn bản hoặc phần tử hiển thị bên trong badge. |
+| `onClick` | `MouseEventHandler<HTMLSpanElement>` | `undefined` | Sự kiện click biến badge thành nút tương tác. |
+| `className` | `string` | `""` | Class CSS Tailwind tùy biến bên ngoài. |
+| `ref` | `Ref<HTMLSpanElement>` | `undefined` | Ref chuyển tiếp đến thẻ `<span>` của badge. |

package/docs/components/button.md

@@ -0,0 +1,262 @@
+# 🔘 Button & IconButton Component (`@owa/ui`)
+
+Bộ component **Button** & **IconButton** tương tác cao, thiết kế chuẩn **Design System**, hỗ trợ **trạng thái Loading linh hoạt**, **Safe Config Fallback** và tuân thủ đầy đủ tiêu chuẩn **WAI-ARIA Accessibility**.
+
+---
+
+## 🌟 Điểm nổi bật
+
+- **Pure Stateless & Hiệu năng cao**: Tối ưu hóa render, không phụ thuộc vào global store, dễ dàng sử dụng và mở rộng.
+- **2 Biến thể Component tiện dụng**:
+  - `<Button>`: Nút bấm tiêu chuẩn kèm văn bản, icon trái/phải, chế độ full width.
+  - `<IconButton>`: Nút bấm chỉ chứa icon hình tròn / vuông, bắt buộc nhãn `aria-label` cho trợ năng (Screen Reader).
+- **5 Kích thước tiêu chuẩn (`size`)**: `xs` (24px), `sm` (32px), `md` (40px - *mặc định*), `lg` (48px), `xl` (56px) với chiều cao, padding, font size và kích cỡ icon được căn chuẩn theo tỷ lệ.
+- **6 Biến thể giao diện (`variant`)**:
+  - `filled` *(mặc định)*: Nền màu đậm, chữ trắng tương phản cao, nổi bật các hành động chính (Primary CTA).
+  - `soft`: Nền pastel nhạt, chữ và viền cùng tông màu, thích hợp cho hành động phụ.
+  - `outline`: Nền trong suốt, viền đôi 2px rõ nét, hover đổi màu nền nhẹ.
+  - `ghost`: Nền và viền trong suốt, hiển thị nền khi hover.
+  - `text`: Nút dạng chữ không viền, padding hẹp, hover đổi màu chữ.
+  - `other`: Bỏ qua các class màu mặc định, tự do áp dụng custom style / gradient qua `className`.
+- **7 Chủ đề màu sắc (`color`)**: `primary`, `secondary`, `neutral`, `error`, `success`, `warning`, `info`.
+- **Tùy chỉnh bo góc linh hoạt (`radius`)**: `none` (góc vuông 0px), `sm`, `md`, `lg` (*mặc định trên Button*), `xl`, `full` (*mặc định trên IconButton*).
+- **Trạng thái Loading thông minh (`isLoading` & `showSpinner`)**:
+  - `isLoading={true}`: Tự động khóa tương tác (`disabled`), đặt `aria-busy="true"` và `aria-disabled="true"`.
+  - `showSpinner`: Mặc định là `false` (không hiển thị spinner xoay). Đặt `showSpinner={true}` khi muốn hiển thị icon xoay vòng.
+  - `loadingText`: Cho phép thay thế nội dung hiển thị khi đang tải (ví dụ: *"Đang xử lý..."*).
+- **Trải nghiệm tương tác mượt mà**: Hiệu ứng thu nhỏ nhẹ khi bấm (`active:scale-[0.98]`), focus ring shade 700 nổi bật khi điều hướng bằng bàn phím.
+- **Safe Config Fallback**: Tích hợp hàm `getSafeConfig` đảm bảo component hoạt động ổn định, không bị crash kể cả khi truyền prop kích cỡ/màu sắc không hợp lệ.
+
+---
+
+## 🚀 Cài đặt & Import
+
+```tsx
+import { Button, IconButton } from "@owa/ui";
+import type {
+  ButtonProps,
+  IconButtonProps,
+  ButtonSize,
+  ButtonVariant,
+  ButtonColor,
+  ButtonRadius,
+} from "@owa/ui";
+```
+
+---
+
+## 📖 Hướng dẫn sử dụng
+
+### 1. Cách sử dụng cơ bản
+
+```tsx
+import { Button } from "@owa/ui";
+
+export function BasicButtonExample() {
+  return (
+    <div className="flex gap-3 items-center">
+      <Button>Button Mặc định</Button>
+      <Button color="secondary">Secondary</Button>
+      <Button color="success" variant="soft">Lưu thay đổi</Button>
+      <Button color="error" variant="outline">Xóa dữ liệu</Button>
+    </div>
+  );
+}
+```
+
+---
+
+### 2. Các kích thước (`size`)
+
+Hỗ trợ 5 kích thước từ `xs` đến `xl`:
+
+```tsx
+<Button size="xs">Extra Small (24px)</Button>
+<Button size="sm">Small (32px)</Button>
+<Button size="md">Medium (40px - Mặc định)</Button>
+<Button size="lg">Large (48px)</Button>
+<Button size="xl">Extra Large (56px)</Button>
+```
+
+---
+
+### 3. Các biến thể giao diện (`variant`)
+
+```tsx
+// 1. Filled (Mặc định): Nền đậm nổi bật
+<Button variant="filled" color="primary">Filled Primary</Button>
+
+// 2. Soft: Nền pastel nhạt
+<Button variant="soft" color="primary">Soft Primary</Button>
+
+// 3. Outline: Viền 2px
+<Button variant="outline" color="primary">Outline Primary</Button>
+
+// 4. Ghost: Nền trong suốt
+<Button variant="ghost" color="primary">Ghost Primary</Button>
+
+// 5. Text: Dạng văn bản tối giản
+<Button variant="text" color="primary">Text Button</Button>
+
+// 6. Other: Tự do tùy biến 100% qua className
+<Button
+  variant="other"
+  className="bg-linear-to-r from-violet-600 via-purple-600 to-pink-500 text-white shadow-md hover:opacity-90"
+>
+  Gradient VIP
+</Button>
+```
+
+---
+
+### 4. Các chủ đề màu sắc (`color`)
+
+Cung cấp 7 tông màu theo chuẩn Design System:
+
+```tsx
+<Button color="primary">Primary</Button>
+<Button color="secondary">Secondary</Button>
+<Button color="neutral">Neutral</Button>
+<Button color="error">Error</Button>
+<Button color="success">Success</Button>
+<Button color="warning">Warning</Button>
+<Button color="info">Info</Button>
+```
+
+---
+
+### 5. Hỗ trợ Icon (`leftIcon`, `rightIcon`) & Component `<IconButton>`
+
+```tsx
+import { Button, IconButton } from "@owa/ui";
+import { PlusIcon, ArrowRightIcon, TrashIcon, HeartIcon } from "@/components/icons";
+
+export function ButtonIconExample() {
+  return (
+    <div className="space-y-4">
+      {/* Button có icon đầu hoặc cuối */}
+      <div className="flex gap-3 items-center">
+        <Button leftIcon={<PlusIcon />}>Tạo mới</Button>
+        <Button variant="outline" color="secondary" rightIcon={<ArrowRightIcon />}>
+          Tiếp tục
+        </Button>
+        <Button variant="ghost" color="error" leftIcon={<TrashIcon />}>
+          Xóa
+        </Button>
+      </div>
+
+      {/* IconButton tròn chuyên dụng */}
+      <div className="flex gap-3 items-center">
+        <IconButton icon={<HeartIcon />} aria-label="Yêu thích" color="error" variant="soft" />
+        <IconButton icon={<PlusIcon />} aria-label="Thêm mới" color="primary" variant="filled" />
+        <IconButton icon={<TrashIcon />} aria-label="Xóa mục" color="neutral" variant="ghost" />
+        {/* Tùy chỉnh bo góc cho IconButton */}
+        <IconButton icon={<PlusIcon />} aria-label="Thêm" radius="md" variant="outline" />
+      </div>
+    </div>
+  );
+}
+```
+
+---
+
+### 6. Trạng thái Loading & Tùy chọn Spinner (`isLoading`, `showSpinner`, `loadingText`)
+
+Khi `isLoading={true}`, nút sẽ tự động bị vô hiệu hóa (`disabled`), đặt `aria-busy="true"`. Bạn có thể tùy chọn có hiển thị icon xoay vòng hay không thông qua prop `showSpinner` (mặc định là `false`):
+
+```tsx
+// 1. Loading không hiện spinner (mặc định: showSpinner=false)
+<Button isLoading>Đang lưu...</Button>
+
+// 2. Loading có hiện spinner xoay vòng (showSpinner=true)
+<Button isLoading showSpinner>Đang lưu...</Button>
+
+// 3. Loading có spinner kèm theo loadingText thay thế
+<Button isLoading showSpinner loadingText="Đang xử lý dữ liệu...">
+  Gửi yêu cầu
+</Button>
+
+// 4. IconButton ở trạng thái loading
+<IconButton
+  icon={<TrashIcon />}
+  aria-label="Đang xóa"
+  isLoading
+  showSpinner
+/>
+```
+
+---
+
+### 7. Tràn chiều rộng (`isFullWidth`) & Vô hiệu hóa (`disabled`)
+
+```tsx
+// Chiều rộng 100% của container
+<Button isFullWidth color="primary" size="lg">
+  Đăng ký tài khoản ngay
+</Button>
+
+// Nút bị vô hiệu hóa
+<Button disabled color="primary">
+  Không khả dụng
+</Button>
+```
+
+---
+
+### 8. Tùy chỉnh bo góc (`radius`)
+
+```tsx
+<Button radius="none">radius="none" (0px)</Button>
+<Button radius="sm">radius="sm" (rounded-sm)</Button>
+<Button radius="md">radius="md" (rounded-md)</Button>
+<Button radius="lg">radius="lg" (rounded-lg - Mặc định)</Button>
+<Button radius="xl">radius="xl" (rounded-xl)</Button>
+<Button radius="full">radius="full" (Pill Shape)</Button>
+```
+
+---
+
+## 🛠️ API Reference
+
+### 1. `ButtonProps`
+
+Kế thừa toàn bộ thuộc tính chuẩn của thẻ HTML `<button>` (`ButtonHTMLAttributes<HTMLButtonElement>`):
+
+| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Kích cỡ của nút (chiều cao, padding, font size, icon size). |
+| `variant` | `"filled" \| "soft" \| "ghost" \| "text" \| "outline" \| "other"` | `"filled"` | Biến thể giao diện và phong cách màu sắc. |
+| `color` | `"primary" \| "secondary" \| "neutral" \| "error" \| "success" \| "warning" \| "info"` | `"primary"` | Chủ đề màu sắc theo Design System. |
+| `radius` | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | `"lg"` | Độ bo góc của nút bấm. |
+| `leftIcon` | `ReactNode` | `undefined` | Icon hoặc phần tử hiển thị trước nội dung chữ. |
+| `rightIcon` | `ReactNode` | `undefined` | Icon hoặc phần tử hiển thị sau nội dung chữ. |
+| `isLoading` | `boolean` | `false` | Trạng thái đang tải (tự động khóa tương tác và đặt aria-busy). |
+| `showSpinner` | `boolean` | `false` | Hiển thị biểu tượng xoay spinner khi đang ở trạng thái loading. |
+| `loadingText` | `ReactNode` | `undefined` | Văn bản hiển thị thay thế khi đang loading. |
+| `isFullWidth` | `boolean` | `false` | Mở rộng chiều rộng chiếm 100% khung chứa (`w-full`). |
+| `disabled` | `boolean` | `false` | Vô hiệu hóa nút bấm. |
+| `children` | `ReactNode` | `undefined` | Nội dung văn bản hoặc phần tử bên trong nút. |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Thuộc tính type chuẩn của HTML button. |
+| `className` | `string` | `""` | Class CSS Tailwind tùy biến bên ngoài. |
+| `ref` | `Ref<HTMLButtonElement>` | `undefined` | Ref chuyển tiếp đến thẻ `<button>`. |
+
+---
+
+### 2. `IconButtonProps`
+
+Kế thừa các thuộc tính của `<button>` ngoại trừ `children`:
+
+| Thuộc tính | Kiểu dữ liệu | Mặc định | Mô tả |
+| :--- | :--- | :--- | :--- |
+| `icon` | `ReactNode` | *(Bắt buộc)* | Icon hiển thị chính giữa nút. |
+| `aria-label` | `string` | *(Bắt buộc)* | Nhãn mô tả hành động dành cho Screen Reader / A11y. |
+| `size` | `"xs" \| "sm" \| "md" \| "lg" \| "xl"` | `"md"` | Kích cỡ của nút icon (24px, 32px, 40px, 48px, 56px). |
+| `variant` | `"filled" \| "soft" \| "ghost" \| "text" \| "outline" \| "other"` | `"filled"` | Biến thể giao diện của nút icon. |
+| `color` | `"primary" \| "secondary" \| "neutral" \| "error" \| "success" \| "warning" \| "info"` | `"primary"` | Chủ đề màu sắc theo Design System. |
+| `radius` | `"none" \| "sm" \| "md" \| "lg" \| "xl" \| "full"` | `"full"` | Độ bo góc của nút icon (mặc định tròn hoàn toàn). |
+| `isLoading` | `boolean` | `false` | Trạng thái đang tải (vô hiệu hóa tương tác). |
+| `showSpinner` | `boolean` | `false` | Hiển thị spinner xoay thay thế cho icon khi đang loading. |
+| `disabled` | `boolean` | `false` | Vô hiệu hóa nút icon. |
+| `type` | `"button" \| "submit" \| "reset"` | `"button"` | Thuộc tính type của nút. |
+| `className` | `string` | `""` | Class CSS Tailwind tùy biến bên ngoài. |
+| `ref` | `Ref<HTMLButtonElement>` | `undefined` | Ref chuyển tiếp đến thẻ `<button>`. |