Yugen UI

ToggleButton

ToggleButton là nút có hai trạng thái bật/tắt, dùng để bật hoặc tắt một tuỳ chọn ngay lập tức.

Cùng appearance và size với Button. Khi bật: secondary chuyển nền đậm hơn, primary đổi sắc brand, outline viền dày, subtle/transparent tô brand cho icon/chữ. Có thể đổi icon theo trạng thái (icon → checkedIcon). Trình đọc màn hình nhận trạng thái qua aria-pressed.

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 { ToggleButton } 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.

Appearance

Các nút dưới đây đang ở trạng thái bật — bấm để so sánh với trạng thái tắt.

Micro đang bật

Controlled & đổi icon

checked / onCheckedChange; nhãn aria-label giữ cố định, trạng thái do aria-pressed truyền đạt.

Kích thước & disabled

small, medium (mặc định), large.

Cách dùng

Nên
  • Dùng cho tuỳ chọn có hiệu lực ngay (ghim, tắt tiếng, in đậm).
  • Đổi sang icon Filled khi bật để tăng tín hiệu thị giác.
  • Giữ nhãn cố định; để aria-pressed mô tả trạng thái.
Không nên
  • Không đổi nhãn theo trạng thái (“Bật” ↔ “Tắt”) — gây nhầm lẫn với trình đọc màn hình.
  • Không dùng cho thiết lập cần lưu/xác nhận — dùng Switch hoặc Checkbox trong form.

Props

Prop · KiểuMặc địnhMô tả
appearance"secondary" | "primary" | "outline" | "subtle" | "transparent"Mặc định: "secondary"Kiểu hiển thị.
size"small" | "medium" | "large"Mặc định: "medium"Chiều cao 24 / 32 / 40px.
shape"rounded" | "circular" | "square"Mặc định: "rounded"Bo góc.
checked / defaultCheckedbooleanMặc định: —Trạng thái bật (controlled / uncontrolled).
onCheckedChange(checked: boolean) => voidMặc định: —Gọi khi người dùng bấm.
icon / checkedIconReactNodeMặc định: —Icon khi tắt / khi bật.
iconPosition"before" | "after"Mặc định: "before"Vị trí icon.
disabledbooleanMặc định: —Vô hiệu hoá.