Yugen UI

Kbd

Kbd hiển thị phím hoặc tổ hợp phím tắt để hướng dẫn người dùng thao tác bằng bàn phím.

Chip phím dùng font mono, nền background-3, viền stroke-1 với cạnh dưới dày hơn như phím thật. KbdGroup ghép nhiều phím thành tổ hợp (Ctrl + K) và dùng thẻ <kbd> lồng nhau đúng ngữ nghĩa HTML.
Ctrl+K

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { Kbd, KbdGroup } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Nhấn / để tìm kiếm hoặc Ctrl+K để mở bảng lệnh.

Trong câu hướng dẫn

EscEscMũi tên lênMũi tên xuống

Kích thước & icon

size small / medium; phím mũi tên dùng icon kèm chữ ẩn (sr-only) cho trình đọc màn hình.

Cách dùng

Nên
  • Viết tên phím đúng như in trên bàn phím (Ctrl, Shift, Enter).
  • Hiện phím tắt cạnh lệnh tương ứng (menu, tooltip, nút).
Không nên
  • Không dùng Kbd để trang trí hoặc làm Badge.
  • Không liệt kê tổ hợp quá 3 phím trong một dòng chữ.

Props

Prop · KiểuMặc địnhMô tả
size"small" | "medium"Mặc định: "medium"Cao 16 / 20px.
childrenReactNodeMặc định: —Tên phím hoặc icon (kèm chữ sr-only — <kbd> không nhận aria-label).
KbdGroupHTMLAttributesMặc định: —Bọc các Kbd và dấu “+” của tổ hợp phím.