# Component

60 component, cùng dựng trên một bộ token. Dùng thử ngay tại đây, hoặc mở từng cái để xem ở chế độ sáng và tối, các prop và cách cài.

## Hành động

- [Button](https://www.werewolf-ui.dev/vi/components/button.md): Kích hoạt một hành động.
- [ContextMenu](https://www.werewolf-ui.dev/vi/components/context-menu.md): Mở menu tại pointer khi nhấn chuột phải, khi nhấn phím context trên bàn phím, hoặc khi nhấn giữ trên cảm ứng, với cùng các mục như DropdownMenu.
- [DropdownMenu](https://www.werewolf-ui.dev/vi/components/dropdown-menu.md): Menu các hành động phía sau một button.
- [Toggle](https://www.werewolf-ui.dev/vi/components/toggle.md): Một button có trạng thái bật hoặc tắt được giữ lại.
- [ToggleGroup](https://www.werewolf-ui.dev/vi/components/toggle-group.md): Nhóm lựa chọn toggle kiểu single hoặc multiple, điều hướng được bằng bàn phím.

## Form

- [Calendar](https://www.werewolf-ui.dev/vi/components/calendar.md): Lưới một tháng để chọn một ngày, inline.
- [Checkbox](https://www.werewolf-ui.dev/vi/components/checkbox.md): Ô 16px bật hoặc tắt một lựa chọn, hoặc hiện bật một phần (indeterminate).
- [ColorPicker](https://www.werewolf-ui.dev/vi/components/color-picker.md): Chọn màu từ vùng độ bão hòa và độ sáng 2D, một thanh sắc độ và một ô hex, trong Popover.
- [Combobox](https://www.werewolf-ui.dev/vi/components/combobox.md): Chọn một giá trị từ danh sách dài bằng cách gõ để lọc.
- [DatePicker](https://www.werewolf-ui.dev/vi/components/date-picker.md): Trigger trông như một field, mở Calendar trong Popover, để chọn một ngày trong form.
- [Field](https://www.werewolf-ui.dev/vi/components/field.md): Một field của form.
- [FilterBar](https://www.werewolf-ui.dev/vi/components/filter-bar.md): Một hàng bộ lọc phía trên bảng, danh sách hoặc chart: ô tìm kiếm, các bộ lọc, nút xóa bộ lọc và số kết quả.
- [Input](https://www.werewolf-ui.dev/vi/components/input.md): Field văn bản một dòng.
- [Label](https://www.werewolf-ui.dev/vi/components/label.md): Tên nhìn thấy của một control trong form, có thể kèm ghi chú Required hoặc Optional, và button info tùy chọn kèm tooltip.
- [NumberInput](https://www.werewolf-ui.dev/vi/components/number-input.md): Field số đã định dạng, với các button bước tùy chọn.
- [OtpInput](https://www.werewolf-ui.dev/vi/components/otp-input.md): Field mã một lần, hiện thành các slot bằng nhau.
- [RadioGroup](https://www.werewolf-ui.dev/vi/components/radio-group.md): Một lựa chọn trong số vài phương án.
- [Rating](https://www.werewolf-ui.dev/vi/components/rating.md): Chọn hoặc hiện một điểm trên thang sao ngắn.
- [Select](https://www.werewolf-ui.dev/vi/components/select.md): Chọn một giá trị từ một danh sách.
- [Slider](https://www.werewolf-ui.dev/vi/components/slider.md): Chọn một số, hoặc một khoảng hai số, bằng cách kéo thumb.
- [Switch](https://www.werewolf-ui.dev/vi/components/switch.md): Bật hoặc tắt một cài đặt ngay.
- [Textarea](https://www.werewolf-ui.dev/vi/components/textarea.md): Ô chữ nhiều dòng, cùng kiểu và trạng thái với Input.
- [Tokenizer](https://www.werewolf-ui.dev/vi/components/tokenizer.md): Field gom vài giá trị ngắn thành các Token.

## Overlay

- [AlertDialog](https://www.werewolf-ui.dev/vi/components/alert-dialog.md): Xác nhận cho hành động phá hủy.
- [Command](https://www.werewolf-ui.dev/vi/components/command.md): Tìm và chạy hành động inline hoặc trong dialog.
- [Dialog](https://www.werewolf-ui.dev/vi/components/dialog.md): Dialog modal với scrim và focus trap.
- [HoverCard](https://www.werewolf-ui.dev/vi/components/hover-card.md): Nội dung xem trước chỉ đọc, mở khi hover hoặc focus bàn phím trên một link.
- [Popover](https://www.werewolf-ui.dev/vi/components/popover.md): Một panel neo vào trigger, cho form ngắn, bộ lọc hoặc link chia sẻ.
- [Sheet](https://www.werewolf-ui.dev/vi/components/sheet.md): Một dialog trượt vào từ một cạnh.
- [Toast](https://www.werewolf-ui.dev/vi/components/toast.md): Thông báo ngắn sau một hành động, ở góc màn hình.
- [Tooltip](https://www.werewolf-ui.dev/vi/components/tooltip.md): Gợi ý chữ ngắn cho phần tử nó bọc, khi hover và khi focus bằng bàn phím.

## Điều hướng

- [BottomNav](https://www.werewolf-ui.dev/vi/components/bottom-nav.md): Thanh điều hướng mobile có tên, với các link, count tùy chọn và trạng thái đang chọn.
- [Breadcrumb](https://www.werewolf-ui.dev/vi/components/breadcrumb.md): Đường dẫn tới trang hiện tại.
- [Link](https://www.werewolf-ui.dev/vi/components/link.md): Một đích có gạch chân, với dấu hiệu external tùy chọn.
- [Navbar](https://www.werewolf-ui.dev/vi/components/navbar.md): Điều hướng trang ở đầu trang: thương hiệu, vài link và các hành động ở cuối hàng.
- [Pagination](https://www.werewolf-ui.dev/vi/components/pagination.md): Chuyển giữa các trang.
- [Sidebar](https://www.werewolf-ui.dev/vi/components/sidebar.md): Điều hướng app shell.
- [Stepper](https://www.werewolf-ui.dev/vi/components/stepper.md): Hiển thị tiến trình của một luồng theo thứ tự.
- [Tabs](https://www.werewolf-ui.dev/vi/components/tabs.md): Chuyển giữa các panel tại chỗ.

## Bố cục

- [Accordion](https://www.werewolf-ui.dev/vi/components/accordion.md): Các phần mở tại chỗ.
- [Card](https://www.werewolf-ui.dev/vi/components/card.md): Bề mặt có viền để nhóm nội dung liên quan.
- [ResizablePanels](https://www.werewolf-ui.dev/vi/components/resizable-panels.md): Các panel cạnh nhau hoặc chồng lên nhau, với một đường kẻ giữa hai panel để kéo hoặc di chuyển bằng phím mũi tên.
- [ScrollArea](https://www.werewolf-ui.dev/vi/components/scroll-area.md): Nội dung cuộn được với thanh cuộn native mỏng theo theme.
- [Separator](https://www.werewolf-ui.dev/vi/components/separator.md): Một đường 1px chia nội dung thành các nhóm.

## Hiển thị dữ liệu

- [Avatar](https://www.werewolf-ui.dev/vi/components/avatar.md): Một người, team hoặc workspace hiện bằng ảnh, hoặc bằng một hay hai chữ cái đầu trên cặp hue khi không có ảnh.
- [Badge](https://www.werewolf-ui.dev/vi/components/badge.md): Nhãn gọn cho status hoặc danh mục.
- [Chart](https://www.werewolf-ui.dev/vi/components/chart.md): Mười một dạng chart định kiểu, với hình học responsive, inspect và một bảng dữ liệu truy cập được.
- [Checklist](https://www.werewolf-ui.dev/vi/components/checklist.md): Danh sách việc có tiêu đề và thanh tiến độ, như các bước bắt đầu trên dashboard.
- [DataTrend](https://www.werewolf-ui.dev/vi/components/data-trend.md): Khối chỉ số với một label, giá trị hiện tại và phần thay đổi.
- [Image](https://www.werewolf-ui.dev/vi/components/image.md): Hiện một ảnh trong khung giữ nguyên kích thước, với placeholder làm mờ để ảnh đầy đủ fade đè lên.
- [Kbd](https://www.werewolf-ui.dev/vi/components/kbd.md): Hiện một phím tắt hoặc một chuỗi phím.
- [Metadata](https://www.werewolf-ui.dev/vi/components/metadata.md): Các cặp nhãn và giá trị chỉ đọc trong một description list.
- [SortableList](https://www.werewolf-ui.dev/vi/components/sortable-list.md): Danh sách người dùng sắp xếp lại bằng cách kéo tay nắm của một hàng hoặc bằng bàn phím.
- [Table](https://www.werewolf-ui.dev/vi/components/table.md): Các hàng dữ liệu.
- [Token](https://www.werewolf-ui.dev/vi/components/token.md): Pill đặt tên một token hoặc giá trị máy ngắn, trên cặp hue mềm (pink theo mặc định), với icon 12px tùy chọn, swatch màu hoặc avatar 16px, và button xóa tùy chọn (onRemove, removeLabel).

## Trạng thái

- [Alert](https://www.werewolf-ui.dev/vi/components/alert.md): Thông báo inline có tên, với action và cách bỏ qua tùy chọn.
- [EmptyState](https://www.werewolf-ui.dev/vi/components/empty-state.md): Giải thích một kết quả thành công nhưng trống, và hành động tiếp theo của nó.
- [Progress](https://www.werewolf-ui.dev/vi/components/progress.md): Thanh cho biết một việc đã xong bao nhiêu.
- [Skeleton](https://www.werewolf-ui.dev/vi/components/skeleton.md): Một khối xám giữ chỗ cho nội dung trong lúc tải.
- [Spinner](https://www.werewolf-ui.dev/vi/components/spinner.md): Một cung quay cho việc không biết độ dài, kèm label giấu khỏi mắt.